Thin borders can disappear when scaled down via CSS transforms
Categories
(Core :: Graphics: WebRender, defect)
Tracking
()
People
(Reporter: sipnet66, Unassigned)
Details
Attachments
(2 files)
User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:124.0) Gecko/20100101 Firefox/124.0
Steps to reproduce:
While developing a personal portfolio, I set the scale property on the div to a floating point number.
#anyrandomdiv {
border: 1px white solid;
width: 90%;
height: 90%;
scale: 0.5;
}
Actual results:
This caused the border of a div to partially (top and left sides) to disappear. Testing this in Chrome did not result in a similar result.
Expected results:
I was generally expecting similar behavior between both browsers. Unless this is intended behavior, I believe that the borders are not supposed to disappear when scaling downwards.
|
||
Comment 1•2 years ago
•
|
||
Do you have a more specific test case for this? For example, the information of its containing block.
I just wrote a simple example:
<!DOCTYPE html>
<style>
#target {
border: 1px white solid;
width: 90%;
height: 90%;
scale: 0.5;
}
</style>
<div style="width: 200px; height: 200px; background: green;">
<div id=target></div>
</div>
It looks normal to me. The result in Firefox Nightly is the same as in the result in Chrome Canary. We probably need a better example or test file for this.
Also, I suspect 1px with scale: 0.5 may cause a sub-pixel rendering result and it may make the border disappear in some cases.
That example you wrote triggers the border issue for me, however I am using Firefox Stable. Here is an image describing exactly what I am seeing. I suppose the problem is fixed in Nightly? I will test later.
Also, could you elaborate what you mean by sub-pixel rendering? How would that have anything to do with the border disappearing?
|
|
||
Comment 3•2 years ago
•
|
||
May I ask your version of the stable Firefox? I just used Firefox release (124.0.1) on mac and Firefox Developer Edition (125.0b4) on windows, and the result looks OK with me, with my test case in Comment 1.
Also, could you elaborate what you mean by sub-pixel rendering?
It's just a guess, though it's unlikely to happen for a straight line. Firefox uses a different way to handle sub-pixels (e.g. 0.5px line) and anti-alias, compared to other browsers, so the result may have some difference. However, in this case, it doesn't make sense that the border disappears. So if it still happens on the newest version, it is a Firefox bug definitely.
|
|
||
Comment 4•2 years ago
•
|
||
OK, I can reproduce this by changing the Zoom to 90% or less by using Firefox API or zoom property. When I change Zoom to 90% (by pressing View -> Zoom -> "Zoom out" in the top window menu, or changing Zoom to 90% in the top-right application menu), the computed value of border width becomes 0.5px on Nightly, and the top and left border disappear.
|
|
||
Comment 5•2 years ago
|
||
|
|
||
Updated•2 years ago
|
|
|
||
Comment 6•2 years ago
|
||
Comment on attachment 9393702 [details]
test case with zoom to 90% (need to set layout.css.zoom.enabled:true)
We have to set layout.css.zoom.enabled to true or change Zoom to 90% or less in the application menu.
|
|
||
Updated•2 years ago
|
|
|
||
Comment 7•2 years ago
|
||
That's odd, I didn't require zoom to be able to replicate the bug. Maybe it's because of the resolution? What resolution are you using? I'm using 1920 x 1080.
|
|
||
Comment 9•2 years ago
•
|
||
My test environment is:
- Mac 16 inches: 3456-by-2234 (254 pixels per inch)
- Windows: 4K monitor with High DPI scaling (note: so it looks like 1080p but sharper.)
So yes, I think the resolution may be the reason why I cannot reproduce this without changing the zoom level.
|
||
Comment 10•2 years ago
|
||
This seems expected. See https://crisal.io/words/2020/06/13/rounding-borders.html for how borders are generally rounded. They don't account for transforms so it makes sense that they could disappear if zoomed out / scaled out enough...
Transforms by definition shouldn't affect layout, so if we want to fix this it'd be on the graphics side.
|
|
||
Comment 11•2 years ago
|
||
Actually bug 1258112 has a lot more context.
Description
•