Borders show stripe artifacts at certain zoom levels when clipped by a rounded container
Categories
(Core :: Graphics: WebRender, defect)
Tracking
()
People
(Reporter: betauploader3, Assigned: nical)
References
Details
(Keywords: perf-alert)
Attachments
(7 files)
Firefox 153: Border stripe artifacts at 130% zoom (layout.css.devPixelsPerPx = 1.25)
User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:152.0) Gecko/20100101 Firefox/152.0
Steps to reproduce:
User Agent
Firefox 153.0b5
Firefox Nightly (current)
Expected Results
CSS borders should render uniformly at all page zoom levels without introducing additional stripe patterns or artifacts, as in Firefox 152.
Actual Results
In Firefox 153 and current Nightly builds, borders may display visible stripe artifacts at certain zoom levels when they are clipped by a rounded container.
Horizontal borders show vertical dark segments, while vertical borders show horizontal dark segments. The number and spacing of these artifacts vary depending on the current zoom level and scaling factor.
Removing overflow: hidden from the parent container, or setting border-radius to 0, prevents the issue.
This behavior does not occur in Firefox 152 and may indicate a rendering regression affecting border rendering under scaling when rounded clipping is involved.
Steps to Reproduce
- Create a new, clean Firefox profile.
- Open the attached reduced test case.
- Zoom the page in and out.
Observed behavior:
- At certain zoom levels, the border displays repeated stripe artifacts perpendicular to the border direction.
- The artifacts disappear at other zoom levels.
- Removing
overflow: hiddenfrom the parent container, or settingborder-radiusto0, eliminates the problem.
Reproducible zoom levels:
-
With
layout.css.devPixelsPerPx = 1.0:- 50%
- 70%
- 90%
- 110%
- 150%
-
With
layout.css.devPixelsPerPx = 1.25:- 50%
- 70%
- 100%
- 120%
- 130%
Additional Notes
- The issue reproduces on a clean profile using the attached minimal test case.
- The same test case renders correctly in Microsoft Edge (Chromium).
- Firefox 152 does not exhibit this behavior, suggesting a regression in Firefox 153 or later.
- The parent container does not need overflowing content. In the testcase,
overflow: hiddenis used to apply rounded clipping, and the child element stays within the parent bounds. - The problem affects all borders, although using transparency makes the stripe patterns easier to observe.
- This may affect websites and browser UI components that use rounded clipping together with borders.
- This may be related to Bug 2051177, which also started in Firefox 153 and affects inset box-shadow rendering under scaling, although this testcase uses standard CSS borders instead of box-shadows.
|
Reporter | |
Comment 1•2 months ago
|
||
Firefox 153 under the same test conditions. Visible horizontal and vertical stripe artifacts appear inside the border near all four corners.
Settings:
- layout.css.devPixelsPerPx = 1.25
- Page zoom = 130%
|
|
Reporter | |
Comment 2•2 months ago
|
||
Firefox 152 under identical test conditions. The border renders uniformly without any visible stripe artifacts.
Settings:
- layout.css.devPixelsPerPx = 1.25
- Page zoom = 130%
|
||
Comment 3•2 months ago
|
||
The Bugbug bot thinks this bug should belong to the 'Core::Layout' component, but is not confident enough to move the bug to that component.
|
||
Updated•1 month ago
|
|
Assignee | |
Comment 4•1 month ago
|
||
The incorrect overlap was happening because with axis-aligned transforms we assume that non-antialiased quads exactly cover thir render task, meaning that the bounds of the indirect prim are the same as the bounds of the primitive that composites it. However the composite quad was more conservative (it was always rounded out to allow potential antialiasing pixels) so there was a mismatch whoch this patch addresses.
|
||
Updated•1 month ago
|
|
|
Assignee | |
Updated•1 month ago
|
|
|
Assignee | |
Comment 5•1 month ago
|
||
This one was caused by add_pattern_prim doing an intersection between the rounded clip rect and the non-rounded local rect, which undid the rounding in some situations. The fix is to do the intersection earlier before rounding the clip rect.
|
|
Assignee | |
Comment 6•1 month ago
|
||
An inefficiency that went unnoticed until a test with fractional scaling showed some odd seams in a solid border.
|
|
Assignee | |
Comment 7•1 month ago
|
||
|
||
Comment 9•1 month ago
|
||
| bugherder | ||
https://hg.mozilla.org/mozilla-central/rev/9e6420bce783
https://hg.mozilla.org/mozilla-central/rev/8cfd16d09230
https://hg.mozilla.org/mozilla-central/rev/76777263a686
https://hg.mozilla.org/mozilla-central/rev/9d3cec6ffc71
|
||
Updated•1 month ago
|
|
||
Comment 10•1 month ago
|
||
| perf-alert | ||
Perfherder has detected a talos performance change from push 9d3cec6ffc71f3e1659210135bc7415bdacc7d6d.
No action is required from the author; this comment is provided for informational purposes only.
| Improvement | Test | Platform | Options | Absolute values [old vs new] |
|---|---|---|---|---|
| 3% | tresize (doc) | linux1804-64-shippable-qr | e10s fission nova stylo webrender | 22.62 ms -> 22.00 ms |
Need Help or Information?
If you have any questions, please reach out to fbilt@mozilla.com. Alternatively, you can find help on Slack by joining #perf-help, and on Matrix you can find help by joining #perftest.
Details of the alert can be found in the alert summary, including links to graphs and comparisons for each of the affected tests.
|
||
Updated•1 month ago
|
|
||
Updated•18 days ago
|
Reproducible on a 2026-06-29 Firefox Nightly build on Windows 10.
Verified as fixed on Firefox Nightly 155.0a1 and Firefox 154.0b10 on Windows 10, macOS 13, Ubuntu 22.
Description
•