755972 - Text in italics using imported font is distorted when scrolling page

Status: UNCONFIRMED

(Core :: Layout: Text and Fonts, defect)

Description

[Dan Weiss]

Attachment: distorted_text.png

User Agent: Mozilla/5.0 (Windows NT 5.1; rv:14.0) Gecko/20120516 Firefox/14.0a2
Build ID: 20120516042006

Steps to reproduce:

I was browsing the page: http://femicom.org/collection/familytraineraerobicsstudio.html
It uses an imported font named "Lato".


Actual results:

When I scroll the page up slowly, using the scrollbar or touchpad scroll, and expose the text, the text is distorted in appearance.
The italic text is being rendered as if the left origin is reset to 0 each time it incrementally draws more of the text.

When I scroll quickly, using the arrow keys with smooth scrolling disabled, the text is drawn correctly.


Expected results:

The text should be rendered properly.

Comment 1

[u279076]

Can you attach a screenshot of what this looks like in Chrome and IE?

Comment 2

[Dan Weiss]

Found another page which demonstrates the bug:
http://www.cultofmac.com/167323/huge-shocker-men-love-the-zooey-deschanel-iphone-ad/
And I don't think there are imported fonts on that page.

Screenshots:
http://i.imgur.com/9nuNs.png  bad version, slowly exposed text while slowly scrolling up
http://i.imgur.com/2TwBg.png  good version, when the entire text is drawn at once

Scrolling upward very slowly using the scroll bars to expose the text is the easiest way to see this problem.

Comment 3

[Eugene Liu]

Attachment: distorted italic text after slow scrolling

Comment 4

[Eugene Liu]

Problem still exists in Firefox 50.1.0 running on Windows 10 (build ID 20161208153507). I can't reproduce it on my Ubuntu install so it should be a Windows-specific rendering issue.

Here's another page with the issue:
http://www.howardforums.com/showthread.php/1888794-Verizon-Wireless-Exclusive-Google-Pixel-carrier

From the few times I've come across this problem, it seems to occur on italic text nested within multiple layers of div elements. I can reproduce this every time on affected pages scrolling through italic text that runs past the bottom of the window. However it's not clear what combination of styles and divs causes it to occur.

Here's another forum using a similar layout that doesn't distort, at least on my machine:
http://www.flyertalk.com/forum/united-airlines-mileageplus/1802527-introducing-basic-economy.html