Bug 120583

Summary: Hardware-accelerated rendering fails to round to whole pixels
Product: WebKit Reporter: Daniel Fischer <fischer.daniel94>
Component: Layout and RenderingAssignee: Nobody <webkit-unassigned>
Status: NEW ---    
Severity: Normal CC: allan.jensen, bao, jonlee, mihaip, simon.fraser, zalan, zan
Priority: P2    
Version: 528+ (Nightly build)   
Hardware: All   
OS: All   
Attachments:
Description Flags
Test case 1: translate3d
none
Result on Safari with latest WebKit nightly
none
Result on latest Firefox/Gecko nightly
none
Result on Chrome 29 on Windows
none
Test case 2: transition
none
Test case 3 - Video iframe inside a translate() DIV
none
Result of Test case 3 on latest Webkit Nightly (OSX) none

Description Daniel Fischer 2013-09-01 12:04:50 PDT
Created attachment 210250 [details]
Test case 1: translate3d

When using something that triggers hardware acceleration, such as translate3d or transitions, translating by a non-whole number of pixels makes the contents blurry.

I've attached a test case and screenshots of how it renders in the latest WebKit and Firefox nightlies. Try it on a non-retina display, as retina displays will show the translations by "half pixels" correctly.
Comment 1 Daniel Fischer 2013-09-01 12:05:49 PDT
Created attachment 210251 [details]
Result on Safari with latest WebKit nightly
Comment 2 Daniel Fischer 2013-09-01 12:06:18 PDT
Created attachment 210252 [details]
Result on latest Firefox/Gecko nightly
Comment 3 Zan Dobersek 2013-09-02 04:23:57 PDT
CC-ing a couple of people to whom this might be of interest.
Also confirming.
Comment 4 Simon Fraser (smfr) 2013-09-03 11:15:46 PDT
This is just a side-effect of the underlying framework used to render 3D transforms on Mac. Not much we can do about it.
Comment 5 Daniel Fischer 2013-09-03 11:25:41 PDT
Created attachment 210392 [details]
Result on Chrome 29 on Windows

Are you sure about that Mac thing?
Comment 6 Daniel Fischer 2013-09-03 11:33:03 PDT
Created attachment 210395 [details]
Test case 2: transition

Also, another test case here. While transitioning, the second line is blurry, while the first one isn't.
Comment 7 Simon Fraser (smfr) 2013-09-03 11:40:07 PDT
This is the difference in rendering between asking the underling text subsystem to render at fractional pixel offsets, and rendering at a pixel boundary into a texture, then compositing that texture at a fractional-pixel offset.
Comment 8 Daniel Fischer 2013-09-03 11:52:43 PDT
How does Gecko get this right? Just from looking at the result, it seems to me like they just round beforehand. Didn't dig into the code though.
Comment 9 Daniel Fischer 2013-12-21 13:56:04 PST
Still present in latest nightly on OS X. Probably on other platforms too.
Comment 10 Allan Sandfeld Jensen 2013-12-21 15:12:01 PST
If it is a non rotating or 3d transform, the content can be rounded to whole pixels and the subpixel part put in the subpixel accumulation. That is what we do for accelerated composited layers with subpixel precision position.
Comment 11 Bao Thien Ngo 2015-01-27 15:29:57 PST
I'm attaching a Test case 3 which is a simple 2D translate but includes an iframe to a Vimeo video, however the symptom appears in a very specific case.

I have a Macbook Pro with Retina display and an attached Thunderbolt Display. When I view the page on my Macbook Pro's LCD screen, it actually looks fine and crisp. However, when I view it on the Thunderbolt Display, it shows up blurry.

I've attached an image comparison of the test page when you load it without the iframe vs when you load it with the iframe; both involve translate() of the DIV element.

If Simon Fraser is correct and this is a subsystem issue of Mac OS X, then I can only theorize that that framework is not correctly handling externally attached monitors. But what about the mere act of adding the iframe to the DIV container?
Comment 12 Bao Thien Ngo 2015-01-27 15:30:39 PST
Created attachment 245483 [details]
Test case 3 - Video iframe inside a translate() DIV
Comment 13 Bao Thien Ngo 2015-01-27 15:33:03 PST
Created attachment 245484 [details]
Result of Test case 3 on latest Webkit Nightly (OSX)

Comparing the loading of the page first without the video iframe, and then with the video iframe.