CODEWITHSUNDEEP
javascriptcssgoogle-chromesafariz-index
Thesis
Thesis

Reputation: 296

Z-Index Behaving Differently in Chrome and Safari

I've been working on a 3D piece http://jsbin.com/vihoye/3/edit?html,output

It's perfect with exception to my final hurdle. For some reason the Z-index is behaving differently in Chrome and Safari. There are 2 things going wrong here but both are positioning issues.

ISSUE #1

The solar system is controlled by the menu to the lower right. When you click on say "Life Skills" info dialogue pops up over the planet. In FireFox when you mouse over the dialogue it triggers a pop-up as it should. However in Chrome and Safari I can't trigger the mouseover event.

ISSUE #2

In FireFox, once the mouseover event is triggered the popup appears on top of the solar system as it should. However, in Chrome and Safari the planets rotate thru the pop-up.

I can't figure out if it is the position property or if it is the rotateY that is causing the problem.

Any suggestions? Thanks in advance for your help.

Upvotes: 1

Views: 414

Answers (1)

totallytotallyamazing
totallytotallyamazing

Reputation: 2923

Okay here is my solution DEMO JS Bin. It is working perfectly in Chrome but in Safari the planets rotate thru the pop-up still. More debugging and it may be fixable but it is not that bad of an anomaly.

I just changed this one CSS ID accordingly:

#galaxy {
    position: fixed;
    width: 100%;
    height: 100%;
    perspective: 4000;
    -webkit-perspective; 4000;
}

Upvotes: 1

Related Questions