``As images slide into view, Ghost/Blink effect is seen for images outside the viewport in IE11 and Flexslider

When using flexslider in carousel mode on Internet Explorer 11, I am seeing ghost images blinking outside of the viewport. Here is the initialization code:

    $('.gallery-block .flexslider').flexslider({
        animation: 'slide',
        slideshowSpeed: 5000,
        animationSpeed: 2000,
        animationLoop: true,
        itemWidth: 214,
        itemMargin: 30,
        minItems: 3,
        maxItems: 4,
        controlNav: false,
        pauseOnHover: false,
        slideshow: true,

        _end_of:"args"
    });

Has anyone encountered a similar issue and found a solution?

Answer №1

Encountering issues with CSS3 transitions in IE11 seems to be a common problem.

To fix this, the solution is to turn off the CSS3 feature of Flexslider:

useCSS

Enabling useCSS allows users to opt out of using CSS3 for animations. Working with Translate3d can lead to unexpected bugs in Webkit browsers, so it's recommended to experiment with this property if you're facing unexplainable issues.

Source: https://github.com/woothemes/flexslider

By simply checking if the browser is IE11 and passing useCSS: false to jQuery.flexslider(), the problem was easily resolved.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

When a user clicks anywhere on the website, the active and focused class will be automatically removed

I'm currently working with Bootstrap tabs on my website. I have three tabs, and when a user clicks on one, the active and focus classes are added to indicate which tab is selected. However, I've encountered an issue where clicking anywhere else ...

Unusual Occurrence: Unexpected Gap at the Beginning of HTML

There seems to be an issue with white space appearing unexpectedly at the top and right side of the file in a website I am working on. Despite adding margin: 0; padding: 0; to both <body> and <html>, the problem persists. After inspecting the ...

CSS code causing issues with table cellpadding functionality

I am currently working on a webpage that is utilizing a pre-existing stylesheet. This particular stylesheet includes the following style rules: table { border-collapse: collapse; } th, td { padding: 0; } My challenge arises when I attempt to cre ...

Tips for adjusting text placement on a Bootstrap responsive webpage:

Hey there, I hope everything is going well. I'm facing a little issue here. I'm trying to design a page layout that looks like this: Image - Description Description - Image Image - Description and so on... However, when viewed on a smaller devi ...

Varying levels of scaling on iPhone and iPad

I am currently working on a website project for my friend's brother and everything is running smoothly (for the most part). The layout of the site is designed with a centered container, leaving approximately 15-20% space from the left side. However, ...

What is the best way to incorporate the animated link hover effect I have implemented, in combination with Bootstrap's stretched link feature?

Recently, I encountered a dilemma while enhancing the hover state of a link by adding an animated underline to it. My approach involved using absolute position in the CSS, specifically setting bottom: 0; in the ::after pseudo class. However, another requ ...

Is there a way to change "display:inline-block" to "display: block" specifically for IE7?

Below is a code snippet that showcases the issue I'm currently facing. jsFiddle Demo <div class="normal"> <a href="#">Test</a> <a href="#">Test longer</a> </div> <div class="ib blockbyclass"> < ...

Ensure that the content is perfectly aligned with the rest of the page for a visually pleasing

Seeking guidance on how to symmetrically center an image gallery with a list background, regardless of the browser's size. Any tips for aligning content perfectly? I attempted using a wrapper around the gallery and list with a fixed width, but it onl ...

Ways to adjust the select element to match the width of its current option

As I work on building a form, I'm looking for a way to make the select element adjust its width based on the length of its current option. Essentially, I want the select element to expand or contract depending on the width of its longest option. I&ap ...

Easily Update Your Div Content by Simply Clicking a Single Link/Button

I am in need of assistance here. My goal is to display dynamic content within a div. Below you will find the code I currently have: <script type="text/javascript"><!-- function AlterContentInContainer(id, content) { var container = documen ...

Incorporate CSS3 transition effects into Bootstrap components

My layout consists of elements arranged using Bootstrap (check out the jsFiddle here): <div class="container"> <div class="row"> <div class="col-xs-3"> <div class="content-block"><p>1</p></div ...

What is the best way to expand my container element and add margins to the top and bottom?

Currently, I am utilizing the Material-UI library in combination with ReactJS, but facing some challenges pertaining to flexbox. The objective is to position my Item Container at the center of my div, extending it to occupy the entire available height whi ...

Maintain parental visibility with children when navigating to a different page

I am currently working on a vertical accordion menu that opens on hover, stays open, and closes when other items are hovered. The great assistance I received from @JDandChips has been instrumental in getting this feature up and running. Now, my main focus ...

Matching the height of table cells with the background height

I'm struggling with the height of a table cell that contains a background image. The width of the cell is set to be 100% of the page's width, and the image's background-size is also set to 100%. This setup makes the background image scale to ...

What are the ways to incorporate the width property in @media queries within CSS?

I've been struggling to set the width inside @media in my code, but it's not working as expected. Here is what I have tried: mat-toolbar { app-toolbar-left { width: 35%; } app-toolbar-right { width: 22%; } } @me ...

What is the best way to make the button cover the entire width?

I have a Vuetify card with a layout where I am rendering some dynamic Vuetify components inside the card based on checkbox selection. These components can be a divider, a spacer, toolbar, or a button. However, I'm struggling to make the buttons span t ...

Centralize Navigation Dropdowns in Bootstrap 4

I am currently using Bootstrap 4 to craft a navigation menu. Each navigation item features a dropdown menu that I want to display centered horizontally on the page, with the same size as the ul element. However, due to my limited experience with Bootstrap, ...

What could be the reason for my div wrapper not showing up in the page preview?

I was expecting to see a centered div(wrapper) with a width of 940px and a black background-color when I previewed my page, but for some reason, there is no evidence of this wrapper even though there are no obvious errors in my HTML or CSS. My CSS is prope ...

Images are not appearing correctly

My website is having a strange issue with user profile pictures. When the image dimensions are small, it looks funny like in the example below: https://i.sstatic.net/oRuqd.jpg I am not sure how to fix this problem. Is there a way to make the images appea ...

What steps can I take to ensure that the elements are in the same row instead of being displayed in three separate rows?

(I'm a beginner in web development and need some help) Is there a way to align elements into the same row instead of stacking them up in separate rows? I'm working on creating a header bar similar to the one on the Naive UI Documentation Website. ...