translate3d on child alters overflow behavior of parent
Reported by
l...@humblespark.com,
Oct 25 2016
|
||||
Issue descriptionUserAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/54.0.2840.71 Safari/537.36 Steps to reproduce the problem: 1. Load http://codepen.io/anon/pen/amrjmy 2. Observe that inner div's overflow is hidden by parent 3. Remove `transform` property from inner div What is the expected behavior? The inner div's overflow is still hidden by the parent because it's `overflow` property is `hidden` What went wrong? The inner's overflow is visible Did this work before? N/A Does this work in other browsers? Yes Chrome version: 54.0.2840.71 Channel: stable OS Version: OS X 10.12.0 Flash Version: Shockwave Flash 23.0 r0
,
Oct 25 2016
,
Oct 26 2016
Tested on MAC OS 10.11.6 using chrome Canary M56 # 56.0.2900.0 and observed same behavior as firefox browser. Attached screenshot of both Chrome and firefox browsers behavior. @Luke -- Could you please check and provide us the expected result screenshot , it would help us in triaging the issue better. Thanks!
,
Dec 15 2016
AFAIK this is by-design and works this way consistently in all browsers. From https://developer.mozilla.org/en-US/docs/Web/CSS/transform: If the property has a value different than none, a stacking context will be created. In that case the object will act as a containing block for position: fixed elements that it contains. If you see this working differently in some other browser then please provide details of which browser you see the different behavior in. |
||||
►
Sign in to add a comment |
||||
Comment 1 by l...@humblespark.com
, Oct 25 2016