Beware of overflow: hidden, it breaks z-translation quite badly

[IjzerenHein]

Hi, I've come across a very annoying browser issue that causes the z-translation to not be respected. It happens to renderables inside a ContainerSurface using 'overflow: hidden'. Basically, the z-translation is no longer respected and instead the DOM ordering is used.
Obviously this is not a famo.us bug, but I thought you should know.
Test project: https://github.com/IjzerenHein/famous-zindex

Regards, Hein

[MylesBorins]

Is this happening in all browsers, or only a specific vendor?

[IjzerenHein]

Z-ordering issues inside the ContainerSurface seem to happen on Chrome. Z-ordering conflicts outside the ContainerSurface on safari and Firefox, haven't tested with IE though

[michaelobriena]

Can you provide test cases? This is something we see break often as browsers roll out new versions.

[IjzerenHein]

I created a test project for it:
https://rawgit.com/IjzerenHein/famous-zindex/master/dist/index.html
https://github.com/IjzerenHein/famous-zindex

[michaelobriena]

Fantastic tests. Thanks for sending these.

[michaelobriena]

Can you send me your browser versions? THanks!

[IjzerenHein]

Chrome Version 38.0.2125.122
And the problem also occurs on cordova builds using crosswalk 8.

[michaelobriena]

I am not sure if I misread your comment 2 hours ago but I am seeing no issues on Safari and Firefox. This seems to be only a Chrome issue for me.

My version of your tests
https://github.com/michaelobriena/famous-zindex

Screenshots:

Chrome 38.0.2125.122:

Chrome Canary 41.0.2229.1 canary (64-bit)

Safari 7.0.3

Firefox 33.1.1

Firefox Nightly 36.0a1

[michaelobriena]

Wrong Safari Screenshot. Edited above.

[IjzerenHein]

Michael,
In my version I had deliberately placed the 4 tests close to each other to see whether there would be any overlapping issues. This screenshot was taken on Safari 8 but looks the same on Firefox.

The surface inside the ContainerSurface at z-translate -50 overlaps the surfaces at z-translate 0 of the top two tests. I'm not sure if this is intended behaviour by the browser, but it looks incorrect to me.

Cheers, Hein

[michaelobriena]

That is just the bottom right overlapping the top right which is not an issue. The four quadrants are technically at the same z depth as far as the browsers are concerned which means it is just left to DOM order. If you rearrange your code to have the each quadrant render in a different order you will see different results.

[IjzerenHein]

Mike,
I'm not so sure about that, the surfaces with the darkest color are all at z-translate -50 and should not overlap the lighter surfaces at z-translate 0 and 50. I have modified the example and removed overflow: hidden on the left-bottom ContainerSurface and then it looks like this:

Live demo: http://gloey.nl/apps/zindex2/

When using overflow: hidden, the divs inside the ContainerSurface seem to overlap the divs outside on all major browsers, not respecting the z-translation. This behaviour occurs on Safari and Firefox, so it almost seems by design. Quite strange really.
Cheers

[michaelobriena]

When outside of the ContainerSurface, essentially think of them as flattening out and existing as a single Surface. The depths of things inside the ContainerSurface does not matter across ContainerSurfaces.

[IjzerenHein]

Right, I see. So in that case the z-index of the ContainerSurface itself would be used, is that correct?

[michaelobriena]

Exactly.

[trusktr]

@michaelobriena Can you post your version with the quadrants separated?

[trusktr]

I made a bug for it in the Chromium bug tracker, https://code.google.com/p/chromium/issues/detail?id=456601&thanks=456601&ts=1423425515

[michaelobriena]

Sorry, I actually just cleaned that up Friday!

[trusktr]

No prob. hehe

[trusktr]

Looks like they've confirmed it is a bug on their side: https://code.google.com/p/chromium/issues/detail?id=456601#c2

[trusktr]

Update: The chromium devs have found the version that caused the break, and are looking to fix it.

[jordangarside]

Is this the bug I'm experiencing on my page?
My overflow: hidden is broken on my canvas container, and z-translation isn't respected.

Only happens on Chrome Mobile, both 4.4 and 5.0.3. (Firefox Mobile works fine)

Source is available here.

[trusktr]

@jordangarside What's the expected behavior? What should I see vs what we're actually seeing?

[zackbrown]

I believe Chrome fixed this at one point a few months ago and then regressed.

The bug appears to occur specifically when both transform-style: preserve-3d and overflow: hidden are on the same element. A solution that has worked in the past for Chrome is to use two containers: an outer container with overflow: hidden and an inner container, a child of the former, with transform-style: preserve-3d.

For example, @jordangarside in the example you linked, if you use to chrome inspector to remove the overflow: hidden property from #mainCtx, (since that element's parent, .famous-root also has overflow: hidden and since #mainCtx has transform-style: preserve-3d) z-translation works as expected.

[michaelobriena]

This has been fixed in Chrome

[IjzerenHein]

Awesome! Which version was that?

[michaelobriena]

@IjzerenHein Unfortunately all I have for you is sometime between today and Nov 24th 2014

[IjzerenHein]

Alright, well thanks for sharing that Michael!