| Summary: | Antialiasing issues with rounded border and inset box-shadow | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
| Product: | WebKit | Reporter: | Luke Channings <luke> | ||||||||
| Component: | Layout and Rendering | Assignee: | Nobody <webkit-unassigned> | ||||||||
| Status: | NEW --- | ||||||||||
| Severity: | Normal | CC: | ahmad.saleem792, ap, bfulgham, simon.fraser, smoley, webkit-bug-importer, zalan | ||||||||
| Priority: | P2 | Keywords: | InRadar | ||||||||
| Version: | Safari 14 | ||||||||||
| Hardware: | Mac | ||||||||||
| OS: | macOS 10.15 | ||||||||||
| Attachments: |
|
||||||||||
Note: iOS is actually a little worse. The line is 2px and follows all the way along the contour. On Desktop it's mostly contained to the edges. Created attachment 413175 [details]
result
Attaching a screenshot of how it looks for me, can you confirm if this thin line is the issue?
It looks identical to me in Safari on macOS, iOS, and in Chrome on macOS.
Created attachment 413176 [details]
iOS screenshot
Hey, yes that's what I'm talking about. I could reproduce it in Chrome and FireFox, but think it's a bug everywhere.
I've attached a screenshot of iOS, where the line is somewhat more visible.
The antialiased line is between the border and the inset box-shadow. (In reply to Simon Fraser (smfr) from comment #5) > The antialiased line is between the border and the inset box-shadow. @Simon - is this similar to this test case - https://jsfiddle.net/dgrogan/k4taryvf/3/ and following Blink commit - https://chromium.googlesource.com/chromium/src.git/+/1fc685bb2c9c54a2148d7c02b2ee903216fd1bcc (Fix painting box-shadow on collapsed border table cells)? If not, I will create separate bug. No, it's unrelated to table cells. |
Created attachment 413023 [details] Reduced example A 1px line is drawn along the contours of a border radius, assuming the background colour of the element it is rendered within. The steps needed to reproduce this behaviour are: - An element with overflow: hidden and border-radius - A child element (or pseudo, or box-shadow, etc) positioned along the edges of the border radius In the example below I reproduce this rendering issue with as little CSS as possible, whilst making it easy to see the issue. When a background colour other than white is used the bug is harder to see, but can still be seen. I have been able to reproduce this in Safari, Chrome, and FireFox. There's a possibility it is deliberate, but am unaware of a reason why, or a possible workaround.