Bug 256003 – Clipped element edges in certain scenarios

• Component: Layout and Rendering
• Status: NEW

Created attachment 466106 [details]
HTML file demonstrating the issue

Elements are rendered incorrectly under some obscure scenarios, the bottom and right edges get clipped. This is most clearly seen on elements with rounded corners because it is most visible where the rounded edge is cut off. As demonstrated by the attached HTML file, I have found that several criteria need to be fulfilled:

* The element is inside a container that overflows.
* Part of the overflow needs to be caused by a resizable sibling element (like a textarea) which also overflows in itself.
* The element is positioned on half pixels (by margin, padding or whatever), in practice, this happened when using a padding of 0.5em with a font-size of 15px.
* The element has some type of linear-gradient background-image.

Created attachment 466107 [details]
Screenshot of the issue in the test-HTML from Safari 16

Created attachment 466108 [details]
Screenshot of the issue in ThinLinc Web Administration

This is a screenshot demonstrating the issue in the "wild".

In the latter screenshot, note the bug in the rendering of the toggle switch and the unchecked radio button.

Note that the element also seems to need the property "position: relative" for the bug to occur.

Removing that property or any of the 4 criteria from comment 0 causes the rendering issue to disappear. Adding an outline also causes the issue to go away, a transparent one also does the trick.

[Radar WebKit Bug Importer]

<rdar://problem/108573001>

Note that he issue happens more often in windowed mode. It seems to also happen more on certain window sizes.