2

In the following scenario, we see two divs with applied CSS3 3D transformations within a container. Both should fire a event when they are clicked. In this case an alert is shown, indicating which div was clicked.

<!DOCTYPE html>
<html>
<body>
  <div style="-webkit-perspective: 600; -webkit-transform-style: preserve-3d; width: 500px; height: 200px; overflow: hidden;">
    <div onclick="alert('1');" style="-webkit-transform: translate3d(0px, 0px, -100px); background-color: blue; position: absolute; width: 100px; height: 100px;">
    </div>
    <div onclick="alert('2');" style="-webkit-transform: translate3d(200px, 0px, 100px); background-color: red; position: absolute; width: 100px; height: 100px;">
    </div>
  </div>
</body>
</html>

The problem is now, that only the second div shows the desired behavior. Clicks on the first div don't result in as shown alert (tested on the latest safari, chrome and safari iOS).

As soon as I change the negative z value from -100px to 0px or a positive value, everything works fine.

Is this a bug of the browser? And is there any way to achieve the desired behaviour?

Benjamin
  • 217
  • 2
  • 10

3 Answers3

1

I've seen this problem before:

CSS3 transition problem on iOS devices

Webkit Mobile doesn't like negative z-index values coupled with 3d transforms. The W3C states that the z-index must be an integer http://www.w3.org/TR/CSS2/visuren.html#z-index, but in practice—because of legacy issues with Firefox and now Webkit— it's better to stick to positive numbers.

Community
  • 1
  • 1
methodofaction
  • 70,885
  • 21
  • 151
  • 164
  • 1
    I understand. But in this case we don't have negative z-index values (2D Space). We have negative z-axis values for elements in a 3d coordinate system (e.g. translate3d(0px, 0px, -100px)). The situation seems to me to be different. – Benjamin Jul 20 '11 at 07:22
0

Add a positive translateZ to the clipped object's parent element to compensate for the negative value of the child. This translates the items above the body element's (z:0) browser plane, which is stopping click and hover events when the div goes negative relative to the browser Z plane. This only appears to happen in Chrome and Safari (and in mobile Safari as well).

I don't believe it is necessarily a bug if you think of the body as the last event handler.

Richard
  • 333
  • 3
  • 7
0

On parent DIV, change -webkit-transform-style: preserve-3d; to -webkit-transform-style: flat; it works fine for me.

inruby
  • 1
  • 2