Z-index not working in safari (OS X Yosemite)

699 Views Asked by At

I have a problem with this site: www.manniche.com.

In the slider, when you hover over it, some arrows appears so you can skip to the next slide. In Safari on OS X Yosemite, the arrows appears on top of the fixed menu, if you have scrolled down a bit, and this doesn't look great. It works fine in Chrome and Firefox.

The arrows have a z-index of 100, while the header have a z-index of 200.

Is this a general Safari issue, or can I somehow overrule it, so the arrows does not apper on top of the menu, but still on top of the slider?

I am using the Revolution Slider Plugin and Wordpress, for the site.

2

There are 2 best solutions below

0
On

I had the same issue and had to add the styling in manually. My arrows were 80px high so it was:

#slider-wrapper { position: relative; }

.tp-rightarrow,
.tp-leftarrow {
    top: 50% !important;
    margin-top: -40px !important;
}

That did the trick nicely.

0
On

You should update to the latest version of the slider. z-index and also transform z issues are solved in the current version. Just rechecked and in 4.6.4 there are no issues like that any more.

Also it is a good idea to contact ThemePunch by following the link http://themepunch.com/support-center where you get a direct answer within a day !