<html>
<head>
<base href="https://bugs.webkit.org/" />
</head>
<body><table border="1" cellspacing="0" cellpadding="8">
<tr>
<th>Bug ID</th>
<td><a class="bz_bug_link
bz_status_NEW "
title="NEW - Font Loading API specifies font is loaded but sizing of font after load reports inconsistent values"
href="https://bugs.webkit.org/show_bug.cgi?id=168533">168533</a>
</td>
</tr>
<tr>
<th>Summary</th>
<td>Font Loading API specifies font is loaded but sizing of font after load reports inconsistent values
</td>
</tr>
<tr>
<th>Classification</th>
<td>Unclassified
</td>
</tr>
<tr>
<th>Product</th>
<td>WebKit
</td>
</tr>
<tr>
<th>Version</th>
<td>Safari 10
</td>
</tr>
<tr>
<th>Hardware</th>
<td>Unspecified
</td>
</tr>
<tr>
<th>OS</th>
<td>Unspecified
</td>
</tr>
<tr>
<th>Status</th>
<td>NEW
</td>
</tr>
<tr>
<th>Severity</th>
<td>Normal
</td>
</tr>
<tr>
<th>Priority</th>
<td>P2
</td>
</tr>
<tr>
<th>Component</th>
<td>Text
</td>
</tr>
<tr>
<th>Assignee</th>
<td>webkit-unassigned@lists.webkit.org
</td>
</tr>
<tr>
<th>Reporter</th>
<td>ssaviano@google.com
</td>
</tr>
<tr>
<th>CC</th>
<td>mmaxfield@apple.com
</td>
</tr></table>
<p>
<div>
<pre>jsfiddle: <a href="https://jsfiddle.net/0ko9fLwo/1/">https://jsfiddle.net/0ko9fLwo/1/</a>
Refresh that page and look at the JS console. It repros via refresh/cmd-R.
Steps:
1) Create a new FontFace object with fallbacks in the source string on page load
2) Load the FontFace
3) Add to documents.fonts
4) Monitor sizing of text with the font
Expected: Element size stays consistent post FontFace load
Actual: Element size has one value and then another post FontFace load.
Occurs on:
a) Version 10.0.2 (12602.3.12.0.1)
b) Release 23 (Safari 10.2, WebKit 12604.1.5)
It appears this has to do with fallbacks in the font source strings (and potentially that this is done in the initial page load). If the font source string is only the remote url, then the sizing inconsistency does not occur.
<a href="https://jsfiddle.net/6eshwbuc/1/">https://jsfiddle.net/6eshwbuc/1/</a></pre>
</div>
</p>
<hr>
<span>You are receiving this mail because:</span>
<ul>
<li>You are the assignee for the bug.</li>
</ul>
</body>
</html>