Bug 218489

Summary: Antialiasing issues with rounded border and inset box-shadow
Product: WebKit Reporter: Luke Channings <luke>
Component: Layout and RenderingAssignee: 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:
Description Flags
Reduced example
none
result
none
iOS screenshot none

Luke Channings
Reported 2020-11-03 01:49:18 PST
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.
Attachments
Reduced example (852 bytes, text/html)
2020-11-03 01:49 PST, Luke Channings 		no flags
Details
result (323.13 KB, image/png)
2020-11-04 10:26 PST, Alexey Proskuryakov 		no flags
Details
iOS screenshot (384.34 KB, image/png)
2020-11-04 10:30 PST, Luke Channings 		no flags
Details
View All Add attachment proposed patch, testcase, etc.
Luke Channings
Comment 1 2020-11-03 01:58:02 PST
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.
Alexey Proskuryakov
Comment 2 2020-11-04 10:26:29 PST
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.
Luke Channings
Comment 3 2020-11-04 10:30:36 PST
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.
Radar WebKit Bug Importer
Comment 4 2020-11-04 10:30:48 PST
<rdar://problem/71042044>
Simon Fraser (smfr)
Comment 5 2020-11-04 10:42:29 PST
The antialiased line is between the border and the inset box-shadow.
Ahmad Saleem
Comment 6 2023-04-24 09:31:36 PDT
(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.
Simon Fraser (smfr)
Comment 7 2023-04-24 11:03:38 PDT
No, it's unrelated to table cells.
Note You need to log in before you can comment on or make changes to this bug.