Not displaying correctly on Internet Exlorer

@brightsidew3 The flexslider script appears to be calculating the width of each slide incorrectly in IE 11, which will affect the height of the images.

In IE 11 I see this:

<li style="width:364px; float: left; display: block;">

In Chrome I see this (990px width, which is expected):

<li style="width: 990px; float: left; display: block;">

If I resize the IE 11 browser window the width is recalculated and all looks good. My guess at this point is that IE 11 needs longer to load your layout and first image than other browsers, so the height’s incorrect.

You could try editing wp-content/plugins/genesis-responsive-slider/js/jquery.flexslider.js and increasing the timers on the two timeout functions (line 82 and 90):

          setTimeout(function() {
            slider.css({"position": "relative"}).height(slider.slides.filter(':first').height());
            slider.args[slider.prop] = (slider.transitions) ? "translate3d(0," + sliderOffset * slider.height() + "px,0)" : sliderOffset * slider.height() + "px";
            slider.container.css(slider.args);
          }, 100);

          setTimeout(function() {
            slider.newSlides.width(slider.width()).css({"float": "left", "display": "block"});
          }, 100);

Try changing the 100 values there to 500 (half a second) or even 1000, then clear your IE cache and reload the page.

If that solves this you could look into solutions that don’t involve editing the plugin, such as recalculating the slide height in your theme upon page load.

• This reply was modified 8 years, 1 month ago by Nick C.

I’m having this exact same problem, but it’s occurring in Chrome. The script is calculating the images way too small on page load, but then when resizing the browser, it calculates correctly.

Site is on a private staging server, so I can’t post a link. Any ideas?