Bug 19858 – Text movement leaves blue pixel trail

• Component: Text
• Status: UNCONFIRMED

[Kiel Oleson]

Moving some text to the right using JavaScript (in particular, jQuery, though maybe others) causes a trail of blue pixels to appear to the left of the moved text.  The trail only appears when certain letters are at the beginning of the line - for example, if T is the first letter of the line, the blue pixels appear; if F is the first letter, no extra pixels are visible.  The extra pixels are in line with the top of the T character when that is the beginning of the line.    Because these blue pixels are visible when the background is dark, but not when it is light, it would seem sub-pixel AA is causing issues here.  When focus is taken from the window, the blue pixels disappear, and returning focus does not return the pixels.

This bug is reproducible using various fonts (Agenda Light and Lucida Grande tested) and on Windows and Mac OS.  Windows build tested was Apple's shipping Safari 3.1.2 under Windows XP; Mac OS build tested was WebKit nightly r34824 under Mac OS X 10.5.4.  Bug was also present in previous Mac OS nightly builds over the past month or so.

[Kiel Oleson]

Created attachment 22045 [details]
HTML file for reduced test case.

[Kiel Oleson]

Created attachment 22046 [details]
CSS file for reduced test case.

[Kiel Oleson]

Created attachment 22047 [details]
Version of jQuery used for reduced test case

[Kiel Oleson]

Created attachment 22048 [details]
Movement JavaScript for reduced test case.

[Kiel Oleson]

Created attachment 22050 [details]
Screenshot of improper behaviour

[Kiel Oleson]

Created attachment 22051 [details]
Screenshot of proper rendering

Blue pixel trail disappears after focus is taken from window rendering test case page.

[Kiel Oleson]

A similar situation occurs when some text is moved to the left; instead of a blue pixel trail, the artifacts are red.

[Simon Winkler]

i also discovered this bug
it happens as soon as a part of a letter 
overlaps a box, and the box moves.
the overlapping part of the letter gets 
not rendered properly.

i made a fiddle, where you can toggle between 
jQuery and CSS animation. i thought that could 
be important when i discovered this weird behavior.
but it turns out that it don't depend on the type of 
animation, it happens anyway.

http://jsfiddle.net/simonwinkler/pyzwA/

[Simon Winkler]

Created attachment 181533 [details]
trail left from overlapping letter part after moving containing box

[Simon Winkler]

btw. i'm running OS 10.7.5 on a macbook pro.
the behavior as shown in the previous screen 
occurs on:
webkit 537+

in my fiddle, i used a left to right animation, 
but the trail gets also "drawn" when you move 
in other directions, not just on linear animations.