Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Flexslider makes issues with position fixed elements #179

Closed
lundahldaniel opened this issue Jun 13, 2012 · 10 comments

Comments

Projects
None yet
7 participants
@lundahldaniel
Copy link

commented Jun 13, 2012

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

@tylerxo

This comment has been minimized.

Copy link
Contributor

commented Jul 24, 2012

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

@shipleyr

This comment has been minimized.

Copy link

commented Aug 6, 2012

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.

@neokio

This comment has been minimized.

Copy link

commented Oct 14, 2012

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

@mattyza mattyza closed this Jun 11, 2013

@shipleyr

This comment has been minimized.

Copy link

commented Jun 11, 2013

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

@mattyza

This comment has been minimized.

Copy link
Member

commented Jun 11, 2013

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

This comment has been minimized.

Copy link

commented Jun 11, 2013

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

This comment has been minimized.

Copy link
Member

commented Jun 11, 2013

Thanks Rob. :)

@pkibbey

This comment has been minimized.

Copy link

commented Oct 24, 2013

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

This comment has been minimized.

Copy link

commented Aug 6, 2014

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

This comment has been minimized.

Copy link

commented Aug 6, 2014

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.