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.
Created attachment 22045 [details] HTML file for reduced test case.
Created attachment 22046 [details] CSS file for reduced test case.
Created attachment 22047 [details] Version of jQuery used for reduced test case
Created attachment 22048 [details] Movement JavaScript for reduced test case.
Created attachment 22050 [details] Screenshot of improper behaviour
Created attachment 22051 [details] Screenshot of proper rendering Blue pixel trail disappears after focus is taken from window rendering test case page.
A similar situation occurs when some text is moved to the left; instead of a blue pixel trail, the artifacts are red.
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/
Created attachment 181533 [details] trail left from overlapping letter part after moving containing box
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.