CODEWITHSUNDEEP
javascripthtmlcssfirefoxz-index
daveycroqet
daveycroqet

Reputation: 2727

Firefox and Safari don't respect z-index after 'perspective' change

https://jsfiddle.net/zdoe56yr/1/

View the above on Chrome/Internet Explorer and the red box will always be on top, no matter how the boxes are skewed.

However, view it in Firefox and Safari, and the blue box bleeds through when the tilt is at a steep enough angle.

It is caused by perspective. Are there any hacks I can do to make Firefox and Safari respect z-index?

Sample code:

$(".background").on("mousemove", function(e) {
  var ax = -($(window).innerWidth() / 2 - e.pageX) / 5;
  var ay = ($(window).innerHeight() / 2 - e.pageY) / 5;
  TweenMax.set(".red, .blue", {
    rotationX: ay,
    rotationY: ax
  });
});

Upvotes: 2

Views: 312

Answers (1)

Maju
Maju

Reputation: 616

Ok, I have no experience with this part of css, but it looks, that if you will make small red square and thanks to translate3D, you will position it forward so it has similar size as square behind then it works (Tested on Firefox).

Question is if this solution is fine for you:

https://jsfiddle.net/zdoe56yr/3/

.red {
  position: relative;
  z-index: 2;
  transform: translate3d(0px, 0px, 200px);
  margin-top: -15%;
  background: red;
  width: 75px;
  height: 75px;
}

But you still need that z-index for Chrome and IE.

Upvotes: 2

Related Questions