Flexslider makes issues with position fixed elements

[lundahldaniel]

Hi!

I'm using flexslider as a background of my page that covers the whole screen and all content on top of it.

The problem is:
I have a bottom menu with position fixed so it's always down in the bottom of the screen, in all browsers except chrome. And this is because of flexslider. If i remove the slide backround, the position fixed problem is gone.

Background slider has a position fixed and a z-index of -1
Bottom menu has a position fixed and a z-index of 499

Anyone that have a similar problem? Anyone knows a solution? Please help.

Best regards,
lundahldaniel

[tylernotfound]

-webkit-backface-visibility: hidden is most likely the culprit. You can remove that property, and try setting useCSS: false in your slider initialization.

[shipleyr]

I'm experiencing a similar problem. I'm using twitter bootstrap as a framework for my application and when I enable the flexslider my fixed header bar is not remaining fixed to the top of the page. When I disable useCSS in the config it works as expected but not with it enabled. I'm also getting some strange behaviours with the useCSS enabled related to my fixed header bar. It gets fragmented and "bits" left on the page.

I get the feeling this is a problem with Google Chrome's Hardware Accelerated transition effect.

[designosis]

@mbmufffin Thank you, using both of those fixed my broken slider!

[shipleyr]

Has this been fixed or known to no longer be a problem?

[mattyza]

This shouldn't be a problem anymore and should be resolved using CSS z-index on the fixed element.

Please advise if this isn't the case on your end. If you have any example links, they'd be very much appreciated. :)

[shipleyr]

I'm not actually working with it at the moment but when I go back to it if I find a problem I will post the issue here.

[mattyza]

Thanks Rob. :)

[pkibbey]

It seems as though this is still an issue.

I have just had to use the suggestion by @mbmufffin to fix the z-index issue on a Galaxy S3...

... remove webkit-backface-visibility from the CSS and setting useCSS to false

[webservant316]

I am using flexslider to create a slide show for my home page. The image is fixed position with CSS to fill the whole screen. I have the layout working great with a flexslider carousel on all browsers EXCEPT IE8 and Opera. For IE8 and Opera the auto and manual slide change the image without a transition and with an awkward white screen between slides. Any ideas? I am using the latest version of the flexslider library. Any help would be appreciated. I am not too worried if the slideshow is clunky in Opera, but I do want to get it working smoothly in IE8.

I did remove the "-webkit-backface-visibility: hidden" style and also set "useCSS: false" in the flexslider Drupal module, but with no change in behavior. I am using Drupal and created an issue post here https://www.drupal.org/node/2316427.

[webservant316]

my solution ~ don't use fixed positioning.

I had simplified a lot of CSS by moving the img to fixed positioning. However, since that didn't work I moved the containing block to fixed positioning and let the image fill the container. The main challenge was making sure all the 'inbetween' containers were sized at 100% wide and 100% height so that my fixed position container could control the size of the image as I preferred.

Works on all browsers.