internet-explorerhoverblinkflashing

Flashing fade with mouseenter and moseleave on Internet Explorer

I have two divs that on mouseenter/mouseleave they fade in/out their child div. On all browsers it looks good, except on Internet Explorer (I am required to make this to work on Internet Explorer). On IE, there is a blinking when hovering on a div while the other one is still fading out.

How can that blinking be prevented?

Here are gifs to illustrate the problem: Chrome IE

<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    </head>
    <body>
        <div class="parent" style="background:gray; padding: 50px; margin: 20px; width: 350px; height:50px;">
            <div class="child" style="display: none; background:white; height: 100%;">
            </div>
        </div>

        <div class="parent" style="background:gray; padding: 50px; margin: 20px; width: 350px; height:50px;">
            <div class="child" style="display: none; background:white; height: 100%;">
            </div>
        </div>
    </body>
    <script>
    $(document).ready(function(){
        $(".parent").mouseenter(function(){
            $(this).find(".child").stop().fadeIn();
        });

        $(".parent").mouseleave(function(){
            $(this).find(".child").stop().fadeOut();
        });
    });
    </script>
</html>

Solution

  • I found a solution. Instead of using jQuery's fadeIn/fadeOut, start with opacity 0 and visibility hidden, and add a class that has opacity 1 and visibility visible on mouseenter.

    <html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
        <style>
            .child {
                -webkit-transition: all 0.4s ease-in-out 0s;
                -moz-transition: all 0.4s ease-in-out 0s;
                -ms-transition: all 04s ease-in-out 0s;
                transition: all 0.4s ease-in-out 0s;

                visibility: hidden;
                opacity: 0;
            }

            .child-show {
                visibility: visible;
                opacity: 1;
            }
        </style>
    </head>
    <body>
        <div class="parent" style="background:gray; padding: 50px; margin: 20px; width: 350px; height:50px;">
            <div class="child" style="background: white; height: 100%;">
            </div>
        </div>

        <div class="parent" style="background:gray; padding: 50px; margin: 20px; width: 350px; height:50px;">
            <div class="child" style="background: white; height: 100%;">
            </div>
        </div>
    </body>
    <script>
    $(document).ready(function(){
        $(".parent").mouseenter(function() {
            $(this).find(".child").addClass("child-show");
        });

        $(".parent").mouseleave(function() {
            $(this).find(".child").removeClass("child-show");
        });
    });
    </script>
</html>