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
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: CSS (show other bugs)
Version: WebKit Nightly Build
Hardware: Unspecified Unspecified
: P2 Normal
Assignee: Nobody
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2017-06-27 05:41 PDT by Roman Komarov
Modified: 2021-05-05 16:30 PDT (History)
5 users (show)

See Also:


Attachments
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
<rdar://problem/77581715>