1

I am designing an html5 mobile application that has an overlay that appears at various points in the app. The overlay may be at the top of the z index visually, but interactively, it sites behind a div below that is intercepting clicks intended for the overlay. I think I know why it is occurring (CSS stacking context for an element below) but I don't know how to work around it.

enter image description here

This issue is very similar to this prior question but the resolutions don't seem to apply in this instance. Stacking context has never messed with me before I started applying CSS3 animations and transforms to my layouts. Now I am a mess.

So far I have tried transform-style: flat; -webkit-transform: translateZ(0px); -webkit-transform: translate3d(0,0,0); and a thousand different z-index approaches to try and keep the lower z-index elements from blocking clicks intended for the overlay. I am at a loss and could use some outside perspective.

I have a codepen that illustrates the issue perfectly here.

Community
  • 1
  • 1
AndyBean
  • 917
  • 1
  • 8
  • 13

1 Answers1

4

If you use a translate3D in z to move your content back, it now works. Chang your div2 style to this:

    -webkit-transform: translate3D(0px,0px,-1px) rotateX(180deg);
Michael Mullany
  • 30,283
  • 6
  • 81
  • 105
  • Brilliant as this solution is it is unworkable straight out of the can as is. You cannot have two style attributes of the same title in the same descriptor without one nullifying the other. It seems like we need a wrapper element here. If you put translate3d after the rotation in the class, you get your brilliant fix but no rotation. If you put it before the rotation, you get no brilliant fix. – AndyBean Apr 21 '14 at 21:00
  • Actually: I think your original suggestion works if we simply combine all of the transforms into a single call. This appears to work, let me test it. `-webkit-transform: translate3D(0px,0px,-1px) rotateX(180deg);` – AndyBean Apr 21 '14 at 21:26
  • Even easier. Multiplying 3D matrices is a PITA. – Michael Mullany Apr 21 '14 at 21:36
  • It works BUT the key is to ensure that you apply the translate3D before you apply the rotateX. [I have created a fixed codepen](http://codepen.io/taoofbean/pen/cbgyB/) for others to reference going forward. – AndyBean Apr 21 '14 at 21:42
  • ok. edited the answer so people see it when they google. Incidentally, expressing the rotation as a matrix3D() also has the same result without needing to add a translate, so I think the problems is that the 2D shorthands are not respecting proper stacking context, but 3D does. Weird bug. – Michael Mullany Apr 21 '14 at 21:56