Join GitHub today
Flexslider makes issues with position fixed elements #179
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:
Background slider has a position fixed and a z-index of -1
Anyone that have a similar problem? Anyone knows a solution? Please help.
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.
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.
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.