I am using flexslider to create a slide show for my home page. The image is to be fixed position with CSS to fill the whole screen. I have the layout working great for single images on all browsers and for 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.

I found these articles that seem to offer guidance, but I have not been able to get them to work for my case.

http://stackoverflow.com/questions/16768540/positioning-issue-in-chrome-...

https://github.com/woothemes/FlexSlider/issues/179

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.

Comments

webservant316’s picture

I had also changed some CSS to make the nav buttons always visible according to https://www.drupal.org/node/2011828. Could that have created the problem?

webservant316’s picture

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.

webservant316’s picture

Here is the css I used for a whole screen image slide show with flexslider and views.

body.page-highlights div.view-content,
body.page-highlights #flexslider-1,
body.page-highlights #flexslider-1 .slides,
body.page-highlights #flexslider-1 .slides li {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
/* The fixed position div is one step outside of #flexslider-1 */
body.page-highlights div.view-content {
position: fixed;
top: 45px;
left: 0;
z-index: 10;
}
body.page-highlights #flexslider-1 img {
height: 100% !important;
min-height: 100% !important;
max-height: 100% !important;
width: auto !important;
min-width: 100% !important;
max-width: 1000% !important;
border: none !important;
}