Bug 173872

Summary: Inner elements inside a button are clipped as if the button has overflow: hidden
Product: WebKit Reporter: Roman Komarov <kizmarh>
Component: CSSAssignee: Nobody <webkit-unassigned>
Status: NEW ---    
Severity: Normal CC: 7raivis, simon.fraser, zalan
Priority: P2    
Version: WebKit Nightly Build   
Hardware: Unspecified   
OS: Unspecified   
Attachments:
Description Flags
Screenshot of the testcase showing the clipping none

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.