New issue
Advanced search Search tips
Note: Color blocks (like or ) mean that a user may not be available. Tooltip shows the reason.

Issue 659162 link

Starred by 0 users

Issue metadata

Status: WontFix
Owner: ----
Closed: Dec 2016
Cc:
Components:
EstimatedDays: ----
NextAction: ----
OS: Mac
Pri: 2
Type: Bug



Sign in to add a comment

translate3d on child alters overflow behavior of parent

Reported by l...@humblespark.com, Oct 25 2016

Issue description

UserAgent: 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
 
Also good to note that in 56.0.2900.0 canary (64-bit) on the same OS the behavior diverges, but possibly in the opposite direction than expected. If you perform the same steps you'll find that the overflow of the child is visible whether the transform is present or not.

Comment 2 Deleted

Labels: Needs-Bisect

Comment 4 by hdodda@chromium.org, Oct 26 2016

Cc: hdodda@chromium.org
Labels: Needs-Feedback
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!

659162.png
170 KB View Download

Comment 5 by rbyers@chromium.org, Dec 15 2016

Cc: rbyers@chromium.org
Labels: -Needs-Feedback -Needs-Bisect
Status: WontFix (was: Unconfirmed)
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