fixed positioned element flicker in IE only, how to solve?

前端 未结 8 2045
北海茫月
北海茫月 2020-12-31 07:53

Weird problem in IE11, the fixed background of the following project flickers when using mousewheel or cursor keys only. This is a bug, for sure.

website: http://ge

相关标签:
8条回答
  • 2020-12-31 08:17

    My Website's body was set to position: relative. Removing that did the trick for my IE-exclusive flickering/jumping problem.

    0 讨论(0)
  • 2020-12-31 08:22

    Apparently the "bug" only affects IE11 on Windows 8.1, or maybe 8.0 too. Removing background-attachmend:fixed worked for me. Apparently that rule was redundant, since the background image displays correctly in every browser without that rule. A second solution is to disable Smooth Scrolling in the IE settings, but that's not optimal since it's enabled in a default installation.

    Flickering CSS:

    #element_id{
        position:fixed;
        height:100%;
        left:0;
        bottom:0;
        right:0;
        background-image:url('path/to/jpg');
        -webkit-background-size:cover;
        -moz-background-size:cover;
        -o-background-size:cover;
        background-size:cover;
        background-repeat:no-repeat;
        background-position:center center;
        background-attachment:fixed;
    }
    

    ...and new code (1 line removed):

    #element_id{
        position:fixed;
        height:100%;
        left:0;
        bottom:0;
        right:0;
        background-image:url('path/to/jpg');
        -webkit-background-size:cover;
        -moz-background-size:cover;
        -o-background-size:cover;
        background-size:cover;
        background-repeat:no-repeat;
        background-position:center center;
    }
    
    0 讨论(0)
提交回复
热议问题