Bug 173872

Summary:

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

Product:

WebKit

Reporter:

Roman Komarov <kizmarh>

Component:

CSS

Assignee:

Nobody <webkit-unassigned>

Status:

RESOLVED FIXED

Severity:

Normal

CC:

7raivis, ahmad.saleem792, akeerthi, karlcow, simon.fraser, webkit-bug-importer, zalan

Priority:

Keywords:

BrowserCompat, InRadar

Version:

WebKit Nightly Build

Hardware:

Unspecified

OS:

Unspecified

See Also:

https://bugs.webkit.org/show_bug.cgi?id=236991
https://bugs.webkit.org/show_bug.cgi?id=26804

Attachments:

Description	Flags
Screenshot of the testcase showing the clipping	none

Roman Komarov

Reported 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.

Attachments
Screenshot of the testcase showing the clipping (164.33 KB, image/png) 2017-06-27 05:41 PDT, Roman Komarov	no flags	Details
View All Add attachment proposed patch, testcase, etc.

Simon Fraser (smfr)

Comment 1 2021-05-05 16:30:30 PDT

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

Radar WebKit Bug Importer

Comment 2 2021-05-05 16:30:39 PDT

<rdar://problem/77581715>

Karl Dubost

Comment 3 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> ```

Karl Dubost

Comment 4 2022-06-28 00:23:41 PDT

Simon is it related to this? https://searchfox.org/wubkat/rev/f3f693605e2361d756076e47b231222c5223705b/Source/WebCore/rendering/RenderButton.cpp#140-144

Ahmad Saleem

Comment 5 2022-11-09 10:27:58 PST

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

Comment 6 2022-12-05 04:29:08 PST

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

EWS

Comment 7 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.

Note You need to log in before you can comment on or make changes to this bug.