0

Please look at this site in a Safari Browser(Possibly Mac OS) http://www.sportaboutgraphics.com

I do not know if the issue is present on Windows Safari. When you hover on the Menu items on the right. Something really weird happens. The issue can not be detected or solved by inspecting elements one by one.

The only way it works when I completely delete the line in Inspect Element which says(Its just after opening body tag):

<div class="parallax-mirror" style="visibility: visible; z-index: -100; position: fixed; top: -8px; left: 0px; overflow: hidden; transform: translate3d(0px, 0px, 0px); height: 680px; width: 1412px;"><img class="parallax-slider" src="http://www.sportaboutgraphics.com/wp-content/uploads/2016/06/Seacliff-Beach.jpg" style="transform: translate3d(0px, 0px, 0px); position: absolute; top: -96.6px; left: 0px; height: 666px; width: 1412px; max-width: none;"></div>

So Basically, there is some sort of conflict with the Parallax.js plugin. Can someone help me fix it or tell me exactly why its occuring?

j08691
  • 204,283
  • 31
  • 260
  • 272
Rohitink
  • 1,154
  • 3
  • 14
  • 21

1 Answers1

0

I managed to fix this myself. Turns out Parallax.js provides a feature to use your own zIndex.

So I set a zIndex value of 1 for the Parallax, and a higher value for the Navigation bar and it fixed it.

Rohitink
  • 1,154
  • 3
  • 14
  • 21