13

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://gerbrandy.zitemedia.nl:88/

I use a script to resize the background proportional but this is not the problem because the resize event does not fire when scrolling, so it is not a problem of the script. It has something to do with a fixed positioned element. This script works okay for several years in all other browsers.

I have no idea how to fix this. Tried several things, but don't know how to disable javascript for example but should not be the case. I'm using IE11 on Windows 8.1.

Does somebody has some same experience with this and do you know how to work around this problem?

Codebeat
  • 6,501
  • 6
  • 57
  • 99
  • Seems to work for me using IE11 on Win 7 (64). Is this possibly specific to a version of Windows (7 / 8 / 8.1 - Modern or desktop)? – Nigel Ellis Jan 08 '14 at 12:23
  • Hai Nigel, thanks for testing. Well, i'm using Windows 8.1 Dutch version but doesn't sound that special i think? I have not tested it on Win7. – Codebeat Jan 08 '14 at 12:41
  • Are you using the Modern/Touch interface or the desktop interface as these sometimes render differently? – Nigel Ellis Jan 08 '14 at 13:33
  • @Nigel, no i'am not using the terrible interface of Windows 8. I use Windows 8 without the new GUI as much as possible. – Codebeat Jan 08 '14 at 13:42
  • That's a relief :) I'm at work at the moment so only have a Windows 7 machine. Maybe someone else can compare Windows 7 and Windows 8 IE11s to see if there is a difference. – Nigel Ellis Jan 08 '14 at 13:44
  • I have also test in on Win7 with IE11 and it is working fine. – Codebeat Jan 12 '14 at 19:12
  • For me, the jumpy behavior was caused by ``opacity:0.99`` on the HTML element (a fix for bolder fonts on Mac). – nebulousGirl Jul 08 '16 at 13:23
  • css question in my opinion, not js. just nitpick, useful question since I have found the answer to my same issue here. – gabore Jun 23 '20 at 13:33

8 Answers8

19

Three things can cause IE 11 flickering/choppy/delay for fixed position element while scrolling:

  1. If you have an "overflow: auto;" on the parent container element, remove it.

  2. Remove background-attachment:fixed; from the fixed position element.

  3. Remove border-radius from the fixed position element (mobile IE only).

Adamy
  • 2,789
  • 3
  • 27
  • 25
13

I was having the same issue, it seems to be a bug that occurs when there is too much going on inside the page for your computer specs to handle, I was able to fix it by adding the following transform code to the fixed position element, (transform: translateZ(0);-webkit-transform: translateZ(0);) that forces the browser to use hardware acceleration to access the device’s graphical processing unit (GPU) to make pixels fly. Web applications, on the other hand, run in the context of the browser, which lets the software do most (if not all) of the rendering, resulting in less horsepower for transitions. But the Web has been catching up, and most browser vendors now provide graphical hardware acceleration by means of particular CSS rules.

Using -webkit-transform: translate3d(0,0,0); will kick the GPU into action for the CSS transitions, making them smoother (higher FPS).

Note: translate3d(0,0,0) does nothing in terms of what you see. it moves the object by 0px in x,y and z axis. It's only a technique to force the hardware acceleration.

 #element {
        position: fixed;
        width: 100%;
        left: 0;
        top: 0;
        z-index: 9994;
...other stuff and then
        /* MAGIC HAPPENS HERE */
        transform: translateZ(0);
        -webkit-transform: translateZ(0);
    }
Neo
  • 11,078
  • 2
  • 68
  • 79
  • This works, but beware of just sticking transforms on any element; it might mess up any child elements with `position:fixed`. (https://stackoverflow.com/questions/2637058/positions-fixed-doesnt-work-when-using-webkit-transform) – AlexMA Oct 22 '18 at 13:34
7

We can remove grey flicker on IE9, IE10, IE11, MEdge<=20 by setting overflow of html and body like

html{
  overflow: hidden;
  height: 100%;    
}

body{
  overflow: auto;
  height: 100%;
}
TLbiz
  • 487
  • 8
  • 7
5

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;
}
mch
  • 1,259
  • 15
  • 23
  • Ah, thanks for the solution after all this time. Not working at this suck company (with their suck scripts, CMS and templates) any more so cannot try it. But your solution sounds plausible. I think that background sizing must be a CSS thing and not a script. Also background-size:cover can be a problem on the iPad 1 or 2. You must specify the screen size in pixels instead. – Codebeat Dec 09 '14 at 22:01
3

A hardware acceleration technique as follow caused mine.

outline: 1px solid transparent;

Remove it and it might be the cause.

dewwwald
  • 287
  • 4
  • 14
  • Very random, but this worked. It was nested deep in the my fixed position div, but it still caused the entire thing to flicker. – V Maharajh Apr 20 '16 at 12:57
  • 1
    to optimize a fixed element use `-ms-transform: translateZ(0);` this will still optimize it on ie, and you won't see a flicker on Safari. – dewwwald Apr 20 '16 at 13:28
  • I was in the process of trying to get rid of the flicker on chrome, and translateZ(0) solved it. Thanks again! I guess chrome is random too. – V Maharajh Apr 20 '16 at 13:35
  • I had a background video autoplaying and it flickered on "IE Edge". Don't know why this worked but thank you! :) – Davide Perozzi Nov 22 '17 at 11:47
0

Another reason for flickering can obviously be another fixed element inside the fixed element. At least that was the reason in my case. The false behaviour of Edge appears to be random.

webdesignwien
  • 1
0

This behaviour is due to a bug with Microsofts "Smooth Scroll" feature. Happens in IE10 and 11 on Win7 and up. I wouldn't recommend to alter your perfectly working code to fix yet another MS bug. Instead disable their "feature" by opening Internet Explorers Settings, go to Advanced and in the category "Browsing" it's the last option which you need to disable "Use smooth scrolling".

FabianS
  • 190
  • 1
  • 12
  • Aparently there is a more or less [working JS solution](https://coderwall.com/p/hlqqia/ie-fix-for-jumpy-fixed-bacground) out there as well. – FabianS Jan 13 '19 at 20:28
-1

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

LUKUS
  • 1