New bug in IE11 -- scrolling position:fixed + background-image elements jitters badly.

Question

visit the following page in IE10 and IE11, and use your mouse wheel to scroll the page:

http://www.oussamaharb.com/

In IE <= 10, Safari, Chrome, and FireFox, the header section of that page stays put when scrolling.  However, only in IE11, when you scroll the page the the header jumps around and jitters.  Essentially IE11 will do this on any div with a fixed background image.

Note the jitter does not happen if you grab the scrollbar with the cursor and move it up and down (which people rarely do).  Some sort of bug when using mouse wheel has been introduced in IE11.

Answer 1

Hi,

I visited your page in IE11(win7) latest update from yesterday, but could not reproduce the issue. I run with Tracking Protection on and Toolbars and BHO's disabled.... you have some google content on that page...

the first step in troubleshooting browser issues is to test in noAddons mode.

try

Internet Options>Advanced tab, check "enable smooth scrolling"

If that does not fix the issue...

Test in noAddons mode....Test with Tracking Protection turned on (and blocking google analyitics. (ga.js)

You are using old versions of jquery and jquery plugins, that use UAS sniffing instead of feature testing... consider updating jquery...

Additionally your page does not validate and uses the depreciated align attribute (50 times)

---

Rob^_^

Answer 2

Hi,

I have EXACTLY the same problem. When I scroll with the middle button of mouse, or by clicking the scrollbar (not dragging), I just blinks.

I tried to disable background-image properties as MigrationUser mentioned, no change.

When I disable smooth-scrolling, it doesn't blink anymore. As this option comes enabled by default, does any of you have a workaround yet?

(URLs provided by byranangler and Max Shillby shows the same behavior as my page)

Answer 3

Hello,

I can confirm that this happens with full HTML5 CSS3 compliant pages.

The only way to get rid of the scrolling jitter for me is to disable Smooth scrolling.

Please fix smooth scrolling asap.

Is there a workaroung we can use in the mean time for people to not experience this?

Answer 4

It only happens in windows 8. The ie version there has the Smooth scrolling turned on by default.

This is a horrible bug. And in the newest Microsoft browser. I have no word for it. Again IE is giving me grey hairs.

Let's not hope this will be (as in previous versions) never resolved.

I think the only workaround will be: do not use: background-attachment fixed. Bummer.

Answer 5

I'm having the same issue on the Surface 2 as well.  Unfortunately there is no turning off smooth-scrolling there.  

Answer 6

visit the following page in IE10 and IE11, and use your mouse wheel to scroll the page:

http://www.oussamaharb.com/

In IE <= 10, Safari, Chrome, and FireFox, the header section of that page stays put when scrolling.  However, only in IE11, when you scroll the page the the header jumps around and jitters.  Essentially IE11 will do this on any div with a fixed background image.

Note the jitter does not happen if you grab the scrollbar with the cursor and move it up and down (which people rarely do).  Some sort of bug when using mouse wheel has been introduced in IE11.

So you are expecting a css hack to work in a cross browser manner?

Answer 7

So you are expecting a css hack to work in a cross browser manner?

No - I and others have reported a significant end-user impact issue related to the way in which IE10/11 is handling fixed background images when scrolling with keyboard, mouse and touch.

That ok with you?

---

Richard Turner www.bitcrazed.com

Answer 8

I also uncovered this issue (but didn't uncover this thread) so filed a Connect bug last weekend:

https://connect.microsoft.com/IE/feedback/details/821953/ie10-ie11-fixed-background-images-move-when-touched-scrolled

Hope Microsoft accepts that they need to fix this because it does detrimentally impact end-user experience.

---

Richard Turner www.bitcrazed.com

Answer 9

I'd been looking for a CSS hack or fix to this issue for an hour when I came across your post from November of last year. I didn't realize that dragging the scrollbar with the cursor actually works; and I agree that it's something I rarely do.

Using the scroll wheel on my mouse and grabbing the scroll bars should not have different impacts on user experience!

I'm still looking for a CSS hack or fix (without forcing the user to turn off smooth scroll) for this if anyone has any suggestions :)

Answer 10

I want the last two hours of my life back...

Why do I continue to defend IE when it does stuff like this - sending me on a wild goose chase, rewriting half my layout to try to fix this issue that ends up being the fault of the browser. Very disappointing

Answer 11

to try to fix this issue that ends up being the fault of the browser.

Which mouse?   I would like to know why my LogicTech mouse scrolls smooth as silk--almost as smoothly as Word--while Microsoft Mouse and Keyboard Center still gives me jitter, even when I tell it that IE is a problem application when it comes to using the wheel (or Auto-Scroll).

---

Robert Aldwinckle
---

Answer 12

Just wanted to see if anyone has come up with a solution for this yet. I'm having the exact same issue currently on http://dev1.thoughtspacedesigns.com and at first thought it was vmware fusion, but was really disappointed to find out it's a browser quirk. If anyone knows of a fix or workaround, please let me know.

Answer 13

http://validator.w3.org/check?uri=http%3A//dev1.thoughtspacedesigns.com/

I have no problems with your site on Win8.1 IE11

Advanced Internet Options>check "Use smooth scrolling".

Is there any reason why you are sourcing the Wordpress libraries from your domain and not a cdn?

Check if you have any blocked content from Tracking Protection (f12>Console tab, blocked content is listed in the console)

scrollr.js has some errors (f12>Debug tab, select "Break on all errors") has the vendor any updates?

---

Rob^_^

Answer 14

You are too late to see.  He removed background-attachment:fixed with IE11.  His link originally showed the stuttering.  It looked too unsatisfactory.

You can still see his handsome design with FireFox where it continues to work well.  (And also good with Chrome, Opera, Safari too).  See how the picture on top stays fixed when you scroll the page?  Not with IE anymore.  With IE that great effect is removed, sacrificed to cure the ugly wart.  The picture now just scrolls upward with the page to avoid the IE11 bug.  Too bad.

Since your first reply here 7 months ago.  Have you any special MVP insider-info yet how to make this great CSS3 port-hole feature scroll smoothly with IE11?  Or possibly, you have encouraging news that it will become corrected in IE12?  Your name is IECustomizer MVP.  It sounds like you will know.

Here are more stutter examples for you to examine.  You may click the background to toggle several different ways to see the affliction during scroll.  Please post back and tell your observation that you can see this stutter.

https://googledrive.com/host/0B8BLd2qPPV7XOGl1Sjk3c29uVlU

 

Possibly somebody still hasn't yet noticed in bryanangler's example ("OP"), IE11 needs to be maximized (or large) to observe the problem.  At least, somebody has not acknowledged.  Bryanangler's page is Responsive Web Design (RWD).  The menu on top is present when space permits.  That's when the background-attachment:fixed applies and makes the horrid stutter.

Answer 15

Here are more stutter examples for you to examine.

I still think that the most dramatic difference in scrolling occurs when I use a LogicTech mouse versus a Microsoft Mouse.  What can it be doing so well that the MS Mouse is doing so badly?  There's something specific:

http://logitech-en-amr.custhelp.com/app/answers/detail/a_id/25855/section/troubleshoot/crid/492/lt_product_id/8553/tabs/1,3,2,4/cl/ca,en

---

Robert Aldwinckle
---

Answer 16

The mouse? Really???

I turned off "Smooth Scrolling" in IE and the problem went away.

There is a bug in IE.

---

ZeroFiveFour

Answer 17

Hi All,

I have a strange issue in IE 11 . 

Pages are opening with scroll bar in IE 8 but not in IE 11.

Has anyone else faced similar kind of issue ? if yes, what is the solution ?

Answer 18

There is a bug in IE.

Agreed.  My point is what has LogiTech discovered that MMKC has not?  Even when I tell MMKC to treat IE as a program "which does not scroll correctly" its wheel scrolling is jerky and its AutoScroll is jittery.  In contrast LogiTech's is almost as smooth as Word makes either kind of scrolling normally.

BTW thanks for the tip about the Advanced tab option.  I had recently done a RIES and had forgotten about that one.  Now at least my wheel can spin more freely.   ; )

---

Robert Aldwinckle
---

Answer 19

Same problem, this is my web site : communauto.com

Answer 20

I added the following to my markup and it seems to take care of the problem in IE 10, IE 11 as well as Microsoft Edge.

<!-- You can see it in action on my site @ zachpatrick.com -->
<script>
  if(navigator.userAgent.match(/MSIE 10/i) || navigator.userAgent.match(/Trident\/7\./) || navigator.userAgent.match(/Edge\/12\./)) {
    $('body').on("mousewheel", function () {
      event.preventDefault();
      var wd = event.wheelDelta;
      var csp = window.pageYOffset;
      window.scrollTo(0, csp - wd);
    });
  }
</script>

Answer 21

zpthree - thank you so much! Totally fixed it for me.

Answer 22

Nice one zpthree!  That was super helpful and has totally sorted out the issue I was having.

Answer 23

Thank you, zpthree! That mostly fixed it. The one problem I have remaining is that the behavior in IE continues if the space bar is pressed instead of the scroll wheel.

Answer 24

You flipping genius!  It Works

Answer 25

Hi, where do I have to insert those lines ?

Answer 26

I was having the same issue, and the solution from the below link worked for me. Read the comments under that solution before using it blindly. In my case that wasn't an issue
http://stackoverflow.com/questions/19377810/ie-10-11-make-fixed-backgrounds-jump-when-scrolling-with-mouse-wheel#answer-25837758

Answer 27

Genius!  Works perfectly :-)  Just a shame there's not a way of pushing zpthree's solution to the top of this thread....