Bug 213456 – Box with border radius sometimes gets rendered with crossed lines from corners

• Component: New Bugs
• Status: RESOLVED CONFIGURATION CHANGED

[Paul Gerarts]

Created attachment 402461 [details]
Block with painting issue

When a block is painted with a border radius it sometimes causes a faint cross (x) to appear from corner to corner. It seems to happen more often on non-retina displays (although it may just be more visible with the reduced density). I can reliably reproduce this in the rendering of this YouTube page on the annotation bubble (the modal that opens on the top-right corner of the video). https://youtu.be/KRGb2s5Ko0Y?t=92 Modal triggers at 01:35 timestamp.

It's not a YouTube issue. This just makes for an example that seems to trigger the issue reliably. I've also had it happen on me while writing CSS. It seems to be a combination of a small border-radius and transparency or opacity.

See the attached image for an example.

I'm running 10.15.5 (19F101) but I've seen this happening on older versions (on a MacBook Pro (Retina, 15-inch, Late 2013) NVIDIA GeForce GT 750M 2 GB, Intel Iris Pro 1536 MB).
Also seen it on a 2019 Touch Bar 4 thunderbolt port 13 inch MacBook Pro without dedicated graphics.
I see it both in Safari Version 13.1.1 (15609.2.9.1.2) and the (at this moment) latest WebKit build (263344).
Again, it's more prevalent on an external monitor (1920 x 1080 in this case).

[Paul Gerarts]

Perhaps a better example at this site in the search-box in the middle. Again; better visible on a lower density monitor, but it's also definitely there on my Retina display.

https://www.glassdoor.nl/Reviews/index.htm

[Radar WebKit Bug Importer]

<rdar://problem/64656469>

[Simon Fraser (smfr)]

Known issue in an underlying graphics framework.

[Simon Fraser (smfr)]

Please test on macOS Big Sur.