Open
Bug 1361721
Opened 7 years ago
Updated 2 years ago
Subpixel rendering bug on DOM objects using CSS3 transforms
Categories
(Core :: Graphics, defect, P3)
Tracking
()
UNCONFIRMED
People
(Reporter: dev, Unassigned)
References
Details
(Whiteboard: [gfx-noted])
Attachments
(1 file)
|
3.11 MB,
video/mp4
|
Details |
User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.81 Safari/537.36 Steps to reproduce: An object with "transform: translate3d(0,0,0)" or "transform: translateY(0)" is rendering a hairline in some circumstances. This behavior affected us in different ways and I think it's a bug of subpixel rendering. It's difficult to explain, so I create a test case to reproduce the wrong result: https://jsfiddle.net/s8o2qsy7/4/ – change the size of the window and some hairlines will appear. Actual results: It depends on the monitor. On a retina display (MacBook Pro) hairlines are barely visible, on a 24" panel with HD-resolution hairlines are nearly on every size visible (see attached capture). The error is available on the current versions on Mac OS and Windows. Expected results: No hairlines like Chrome.
|
||
Comment 1•7 years ago
|
||
I can reproduce the problem. It looks like a rounding issue. IIRC, we'll create a layer if there is a 3d transform. Bug 1361662 has a similar problem.
|
||
Comment 2•7 years ago
|
||
I also ran in to this issue and created my own test case before figuring out that is was related to subpixel rendering and layers/transforms i had borders on elements with percentage width that intermittently disappeared because of a parent having "overflow: hidden" and the transformed element rendering too wide this only happens in firefox repro: https://jsfiddle.net/g7rqwkeo/
|
||
Updated•2 years ago
|
Severity: normal → S3
You need to log in
before you can comment on or make changes to this bug.
Description
•