2

I have a very tricky issue using fullpage.js, a library that brings you a full-page slider. I want the slider to contain a background image with a title (h1). Moreover, between the background and the title I want to place a transparant image as an overlay, one that doesn’t slide along (with an absolute position).

Even though I I am able to move the title above the overlay by setting the z-index to 2, full page.js adds -webkit-transform: translate3d(0px, 0px, 0px); transform: translate3d(0px, 0px, 0px) to the slidercontainer as soon as you slide, hereby ignoring the z-values and moving he title behind the overlay.

I’ve tried transform-style: flat; (like they propose here: css z-index lost after webkit transform translate3d), but this doesn’t work for me.

Turns out I’m not the only one with this problem (https://stackoverflow.com/questions/27179052/fullpage-js-z-index-lost-after-css3-enabled).

Does anyone have any clue how to fix this?

Thanks!

Community
  • 1
  • 1
Da2n
  • 21
  • 1

1 Answers1

0

just add transform: translate3d(0,0,1px); to the elements which are affected.

Manuel R.
  • 1