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

    全般的な情報交換

  • 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.

    2013年11月9日 20:59

すべての返信

  • 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^_^


    2013年11月10日 3:44

  • I actually had it sitting on the debugger when you replied, Mr Customizer.


    I noticed that if you turn off all the background-image css (bg1.jpg and bg3.jpg) that cascade to id=header, then the body background-image (bg3.jpg) remains, and it alone is sufficient (provides the blue skyscraper background).  Doing this eliminates the jitter - the page scrolls smoothly beneath the menu.

    2013年11月10日 5:56
  • 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)

    2013年11月13日 14:59
  • 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?

    2013年12月9日 13:20
  • 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.





    • 編集済み Henk1983 2013年12月18日 12:25
    2013年12月18日 10:33
  • I'm having the same issue on the Surface 2 as well.  Unfortunately there is no turning off smooth-scrolling there.  
    2014年2月11日 1:09
  • 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?
    2014年2月21日 0:52
  • 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

    2014年2月27日 0:31
  • 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


    2014年2月27日 0:34
  • 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 :)


    2014年4月3日 17:59
  • 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

    2014年4月7日 14:24
  • 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
    ---

    2014年4月7日 16:15
  • 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.
    2014年6月7日 20:28
  • 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^_^

    2014年6月11日 4:19
  • 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.

    2014年6月11日 6:59
  • 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
    ---

    2014年6月12日 15:38
  • The mouse? Really???

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

    There is a bug in IE.


    ZeroFiveFour

    2015年2月13日 14:50
  • 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 ?

    2015年2月20日 13:07
  • 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
    ---

    2015年2月23日 17:37
  • Same problem, this is my web site : communauto.com
    2015年8月5日 17:56
  • 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>




    • 編集済み zpthree 2015年10月21日 21:59
    2015年10月21日 21:53
  • zpthree - thank you so much! Totally fixed it for me.
    2015年10月28日 15:15
  • Nice one zpthree!  That was super helpful and has totally sorted out the issue I was having.
    2016年2月26日 18:29
  • 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.
    2016年5月11日 16:53
  • You flipping genius!  It Works
    2016年6月10日 9:28
  • Hi, where do I have to insert those lines ?
    2017年2月1日 12:08
  • 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
    2017年3月27日 19:16
  • Genius!  Works perfectly :-)  Just a shame there's not a way of pushing zpthree's solution to the top of this thread....

    2017年8月13日 17:19