Simple scaling, yet Border Rendering fails
Categories
(Core :: Graphics: WebRender, defect, P3)
Tracking
()
People
(Reporter: yezhizhenjiakang, Unassigned)
References
(Blocks 1 open bug)
Details
Attachments
(2 files)
bug.png
User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/133.0.0.0 Safari/537.36 Edg/133.0.0.0
Firefox for Android
Steps to reproduce:
Run following simple html in Firefox
<!DOCTYPE html>
<div style="transform: scale(.5); border: 1px solid; height: 100px; width: 100px"></div>
Actual results:
On Firefox PC, left & top edge disappears
On Firefox Android, right & bottom edge disappears
See behaviour here
https://github.com/servo/servo/issues/35534#issuecomment-2670166968
Expected results:
https://github.com/servo/servo/issues/35534#issuecomment-2676047629
All edges should display evenly. In Edge/Chrome, this always displays correctly.
This is probably a webrender bug, as it occurs in Firefox & Servo.
|
||
Comment 2•1 year ago
|
||
The Bugbug bot thinks this bug should belong to the 'Fenix::Browser Engine' component, and is moving the bug to that component. Please correct in case you think the bot is wrong.
(In reply to Euclid Ye from comment #1)
This is probably a webrender bug, as it occurs in Firefox & Servo.
|
||
Comment 4•1 year ago
|
||
I can't reproduce on Nightly and macOS. On which version and OS are you reproducing this for desktop?
Hi Francesco. This happens when you zoom under the point, where border is snapped to 1 device pixel. For me, it happens for zoom under 120%.
I am running Windows 11, Firefox Developer Edition 136.0b9
For Android, I am running latest 135.0.1
|
|
||
Comment 6•1 year ago
|
||
Zooming was not mentioned. For me, it's normal at 100%, between 150% and 170% right and bottom get thicker, all 4 get thicker at 200%.
I'm not sure if it's graphics or CSS though.
We kinda think it is not CSS problem. Because computed values as I checked in Firefox Dev Tools, is correct and behave same as Chromium.
https://github.com/servo/servo/issues/35534#issuecomment-2676223284
|
||
Comment 8•1 year ago
|
||
|
|
||
Comment 9•1 year ago
|
||
Can repro on a build from Jan2022, so not a new regression.
Should probably block bug 1487858.
|
||
Comment 10•1 year ago
|
||
(In reply to Francesco Lodolo [:flod] from comment #6)
Zooming was not mentioned. For me, it's normal at 100%, between 150% and 170% right and bottom get thicker, all 4 get thicker at 200%.
That sounds like you're on a high-res screen with devicePixelRatio = 2, I suspect (so that 1px border thickness, with scale(.5) applied, corresponds to 1 device pixel). I see similar on my MacBook Pro. Zoom out to 90% or smaller, though, and the top and left borders vanish.
On a low-res screen, the issues happen at correspondingly larger zoom sizes: on a low-dpi external monitor, I have to zoom to 200% before the top/left borders appear at all.
If the border with is specified as 0.5px directly, and no transform applied, the borders remain visible at all zoom levels, even out to 30% on the low-dpi screen. The issue is presumably that we're attempting to snap to device pixels (to maintain sharp rendering) but failing to account for the transform.
Note that the problem doesn't happen if you add something like rotate(0.1deg) to the transform; in that case we no longer attempt to snap to device pixels, and the borders are consistently visible (though slightly blurred).
|
||
Comment 11•1 year ago
|
||
Dropping into Graphics Triage for the team to have a look at this week.
|
|
||
Updated•1 year ago
|
|
|
||
Updated•1 year ago
|
Description
•