[Webkit-unassigned] [Bug 172210] New: Web fonts loads inconsistently in WebKit based browsers

[bugzilla-daemon at webkit.org]

https://bugs.webkit.org/show_bug.cgi?id=172210

            Bug ID: 172210
           Summary: Web fonts loads inconsistently in WebKit based
                    browsers
           Product: WebKit
           Version: Safari 10
          Hardware: All
                OS: All
            Status: NEW
          Severity: Major
          Priority: P2
         Component: Page Loading
          Assignee: webkit-unassigned at lists.webkit.org
          Reporter: roland at nextendweb.com
                CC: beidson at apple.com

My assumtion would be:
- Font family starts to load
- When Font family loaded and renderable I get an event
- Then I can be sure that the font loaded and if I get the width of an inline element which has that font family, then I get the correct value

Webkit fails to do this and fires the load event even when not able to render the font family yet. It happens mostly on IOS Safari when font family is not cache, but in simulated network enviroment, I can simulate it in Safari on OSX, Chrome on OSX and Chrome on Windows too.

I have created a page to show this bug: http://smartslider3.com/bugs/webkit/fontfamily1/index.html

It loads several Google Fonts with the Web Font Loader JavaScript library: https://github.com/typekit/webfontloader
I tried it with document.fonts.ready, but it was even more inconsistent in non-simulated environment.

If the output contains green "Fonts active + renderable" then everything was fine. 
If there is no green on the output or red appears, it means a fail.

The desired output would be something like this (families might be in different order, depends on the network environment):

Internet Explorer 11, Edge and Firefox produces the following result even in throttled network condition.

1495005090005 - Fonts active + renderable
1495005090005 - All family renderable
1495005090005 - Fonts active
1495005090004 - All family renderable
1495005090004 - Family Paytone One renderable
1495005089997 - Family Lato renderable
1495005089982 - Family Merriweather renderable
1495005089967 - Family Montserrat renderable
1495005089927 - Family Kaushan Script renderable
1495005089890 - Page loaded
1495005089854 - Font load started
1495005089854 - Window ready

To be able to consistently reproduce the bug, you must throttle the network only on the host: fonts.gstatic.com
(Charles proxy was great help in it.) Make sure to set up https proxy too if you are testing on the https version.

For Safari/OSX testers: It is not enough to disable caches on develop tab. You must hit Empty caches to remove font families from the cache! It seems like disable cache has no effect on the font families.

For IOS: when document load event fired, the default width with the system font changes so I have to update it to be able to compare to the soon-to-be-renderable font families. I think it is a bug too.


Chrome - Failed output:

Fons marked ready, but browser is not be able to render them yet. It takes more than 1 seconds for Family Kaushan Script to be able to render after it should be.

1495006708685 - All family renderable
1495006708685 - Family Kaushan Script renderable
1495006708078 - Family Lato renderable
1495006708050 - Family Paytone One renderable
1495006707802 - Family Montserrat renderable
1495006707578 - Fonts already marked active but NOT renderable
1495006707577 - Fonts active
1495006707529 - Family Merriweather renderable
1495006704563 - Page loaded
1495006704525 - Default width: 531
1495006704521 - Font load started
1495006704520 - Window ready


Safari - OSX - Failed output:

1495007372801 - All family renderable
1495007372801 - Family Kaushan Script renderable
1495007372800 - Family Paytone One renderable
1495007372596 - Fonts already marked active but NOT renderable
1495007372594 - Fonts active
1495007372579 - Family Lato renderable
1495007372377 - Family Merriweather renderable
1495007371651 - Family Montserrat renderable
1495007369650 - Page loaded
1495007369543 - Default width: 531
1495007369539 - Font load started
1495007369538 - Window ready



Safari - IOS - Failed output

1495006954937 - All family renderable
1495006954937 - Family Kaushan Script renderable
1495006954345 - Family Lato renderable
1495006954021 - Family Paytone One renderable
1495006953548 - Family Merriweather renderable
1495006952815 - Family Montserrat renderable
1495006952047 - Fonts already marked active but NOT renderable
1495006952041 - Fonts active
1495006952000 - Default width changed from the original value to: 918
1495006951990 - Page loaded
1495006951961 - Default width: 531
1495006951944 - Font load started
1495006951940 - Window ready

-- 
You are receiving this mail because:
You are the assignee for the bug.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.webkit.org/pipermail/webkit-unassigned/attachments/20170517/c4f58c07/attachment.html>