Inner elements inside a button are clipped as if the button has overflow: hidden

• Component: CSS
• Status: RESOLVED FIXED

[Roman Komarov]

Created attachment 313908 [details]
Screenshot of the testcase showing the clipping

See a testcase: https://codepen.io/kizu/pen/BZmmqL

When we have a button element with something inside of it that goes beyond its dimensions, anything that goes beyond the button's box is clipped as if the button has `overflow: hidden`, while it is not (manually setting `overflow: visible` won't fix it either). This can be fixed by adding the `position: relative` to the inner element, but in other browsers including Chrome everything works as intended, without that clipping.

Screenshot of the testcase attached.

[Simon Fraser (smfr)]

We seem to set up a clip when painting the button.

[Radar WebKit Bug Importer]

<rdar://problem/77581715>

[Karl Dubost]

This is happening also on http://nydailynews.com (see the feedback button)

This creates a webcompat issue with Firefox and Chrome. Both let the image overflow. 

Similar test case with an image. 


```
data:text/html,<button style="width:20px;"><img style="background-color:red;width=50px;height:50px;" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"></button>
```

[Karl Dubost]

Simon is it related to this?

https://searchfox.org/wubkat/rev/f3f693605e2361d756076e47b231222c5223705b/Source/WebCore/rendering/RenderButton.cpp#140-144

[Ahmad Saleem]

By any chance, is this following Blink commit:

https://src.chromium.org/viewvc/blink?view=revision&revision=193213

https://github.com/WebKit/WebKit/blob/388a2cb6b11b3c27af168a286fc4c6f16baeb505/Source/WebCore/rendering/RenderButton.cpp#L154

https://github.com/WebKit/WebKit/blob/0d7afc5a45c140c44497a81e92416f01306be877/Source/WebCore/rendering/RenderButton.h#L49

[Ahmad Saleem]

PR - https://github.com/WebKit/WebKit/pull/7062

[EWS]

Committed 257439@main (7db4da203517): <https://commits.webkit.org/257439@main>

Reviewed commits have been landed. Closing PR #7062 and removing active labels.