Bug 173872 - Inner elements inside a button are clipped as if the button has overflow: hidden
Summary: Inner elements inside a button are clipped as if the button has overflow: hidden
Alias: None
Product: WebKit
Classification: Unclassified
Component: CSS (show other bugs)
Version: WebKit Nightly Build
Hardware: Unspecified Unspecified
: P2 Normal
Assignee: Nobody
Keywords: BrowserCompat, InRadar
Depends on:
Reported: 2017-06-27 05:41 PDT by Roman Komarov
Modified: 2022-12-06 15:58 PST (History)
7 users (show)

See Also:

Screenshot of the testcase showing the clipping (164.33 KB, image/png)
2017-06-27 05:41 PDT, Roman Komarov
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description Roman Komarov 2017-06-27 05:41:33 PDT
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.
Comment 1 Simon Fraser (smfr) 2021-05-05 16:30:30 PDT
We seem to set up a clip when painting the button.
Comment 2 Radar WebKit Bug Importer 2021-05-05 16:30:39 PDT
Comment 3 Karl Dubost 2022-06-27 23:44:53 PDT
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>
Comment 6 Ahmad Saleem 2022-12-05 04:29:08 PST
PR - https://github.com/WebKit/WebKit/pull/7062
Comment 7 EWS 2022-12-06 15:58:34 PST
Committed 257439@main (7db4da203517): <https://commits.webkit.org/257439@main>

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