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:
Depends on:
Blocks:
 
Reported: 2017-06-27 05:41 PDT by Roman Komarov
Modified: 2017-06-29 13:40 PDT (History)
3 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.