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.



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.


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;
amaria’s picture

Status: Active » Closed (outdated)