Fixed elements/backgrounds are jumpy when scrolling with mouse wheel

Not reproducible Issue #5752059

Details

Created
Dec 8, 2015
Privacy
This issue is public.
Reports
Reported by 21 people

Sign in to watch or report this issue.

Steps to reproduce

URL:

Repro Steps:

==============

Example: http://www.greenmangaming.com/

The fixed background image looks horrible when you scroll up/down using the mouse wheel.

Expected Results:

==============

Fixed element or background image shouldn’t move at all when you scroll.

Actual Results:

==============

Dev Channel specific:

================

No

Attachments

0 attachments

    Comments and activity

    • Microsoft Edge Team

      Changed Assigned To to “Rico M.”

      Changed Assigned To from “Rico M.” to “Rick J.”

      Changed Steps to Reproduce

      Changed Assigned To from “Rick J.” to “IE S.”

      Changed Status to “Not reproducible”

    • There currently doesn’t seem to be any background image on http://www.greenmangaming.com/ but we’re aware of this issue impacting other sites.  If you observe this again, or on other sites, please do let us know so we can investigate further!

    • Hey I have spent most of today trying to figure this out…

      I’m building a site with Weebly (for beginners I know, but trust me I’m reasonably comfortable with html/css)

      I’ve tested on every browser but only having issue with background image jittering through scroll on Edge on windows 10.

      I have test IE on windows 7 no problem, chrome, firefox, safari, opera, no issues except for Edge browser. Tested on windows + mac all browsers to see if it’s my code/browser issue.

      I’d say it’s a browser issue.

      The scroll is so ugly. I have been building my site, it’s not ready to publish, but if you want to test the issue the test site is here www.sdsstest.weebly.com

      here’s the code I believe that’s causing the issue; yet no issue in any other browsers. I’ve tried a few attempted workarounds but nothing works:

      .wsite-background {
      display: table;
      width: 100%;
      height: 100%;
      background: url(images/bg.jpg) top center no-repeat;
      background-size: cover !important;
      background-attachment: fixed !important;

      }

    • The same is valid for SIBGRAPI’s website ( i.e. http://gibis.unifesp.br/sibgrapi16/Hotel_And_Logistics.php )
      In Microsoft Edge it simply ignores the fixed background-attachment property, while Internet Explorer it is not well fixed.

      CSS is provided below. No issues with other browsers so far.

      #background{
      background: #ff5722 url(…/backgrounds/aviao.jpg) center center;
      background-attachment: fixed;
      background-repeat: no-repeat;
      background-size: cover;
      }

    • Here’s another good example:

      https://www.thecssninja.com/css/reveal-effect - this one is the same as the above example, with a background-attachment: fixed property.

      However, the problem also seems to appear whenever an element has position:fixed and a negative z-index:

      check element .nt_section.fixed_section with a negative z-index and position: fixed

      Please fix this asap

      Thanks

    • I was working on a holiday sale and ran into this problem. It ruins the entire experience for a customer. You can see this here: http://www.jomashop.com/holiday-sales.html

      I also found this issue on Macy’s holiday page: http://www1.macys.com/
      (This will probably be bought down soon.)

    • My Facebook News Feed dashboard also has the same problem.

    • I have the same problem at http://grind.projecthost.hu. If you scroll down, the large images become grayscaled and fixed, the fixed images have a -1 z-index to keep them behind the main content.

      Do you still work on solving this issue? Is there a workaround for this situation?

    • I have this issue only in edge as well. no other browsers. My facebook news feed left and right elements that are supposed to be static, jump when scrolling.

    • Yes, prime example is https://facebook.com as one of the most commonly used sites on Edge. Once you get to the point where the left and right side panes get docked to the top and you only scroll the newsfeed in the middle, the side panes start jerking as you scroll. Happens both with mouse wheel, touchpad or touch (screen) scrolling. Doesn’t happen with any other browsers. Not sure why this is marked as Not Reproducible

    • It clearly is reproducible. Currently I have found that the issue also happens when I have one element overlapping a background fixed element. For example I have a box of text that I put margin-bottom:-10vh to bring it down over my background fixed banner. When I do this the banner gets janky as hell in edge when scrolling. Just take away the margin and the issue goes away. Seems edge has significant paint issues.

    • Also got this bug on pages, that has element with -margin on div with background-attachment; fixed. On pages without that div problem dissapears.

    • How is this marked as unreproducible? It is very visible on many websites, eg. http://www.dr.dk/nyheder/udland/brexit or http://impactiv.fr.
      This has been an issue forever in IE, and unfortunately Edge has inherited this bug.

    • here’s an example of this issue on one of Microsoft’s own websites! : on the canadian Microsoft Store website https://www.microsoft.com/en-ca/store/b/home look at the “Questions? Talk to an expert” bar located in the bottom-right corner as you scroll up and down, it flashes and stutters as you scroll. Click on it, and the issue seems to be even worse. When I go to the same site in Chrome by comparison, I see none of these issues, Chrome works properly. Please fix this! It’s very annoying and it makes Edge seem buggy and not smooth/polished

    • When will this be finally fixed?!? I have this issue on my website as well. Seriously - it`s been over 15 months and no fix has been provided at all? Way to go Microsoft!

    • Hi all,

      Thank you for reporting these issues.  As mentioned above we are aware of this symptom affecting many sites, though the root cause may vary from site to site.  For example, some of the samples posted above are using fixed attachment backgrounds vs. others with fixed elements.  Negative z-index frequently is a factor but not in all cases.

      We do intend to fix these issues, and indeed some cases are resolved in the Creators Update.  That said, we’re aware that many remain unfixed.  In order to make sure we are addressing the multiple root causes correctly, please do file a separate issue for your particular symptom so we can analyze and address it individually.  This issue reported greenmangaming.com which no longer seems to reproduce, so this individual issue will be closed out.

    • Matt, how about the one on the Canadian Microsoft Store website? This is a Microsoft website!!! It’s a grey rectangle in the bottom-right corner that says “Questions? Talk to an expert” . In Edge, it mostly flashes/flickers white as you scroll up and down but it also does jump/skip a bit as you scroll too https://www.microsoft.com/en-ca/store/b/home

    • Also happens to a parent element with position: fixed when it has a child with position: fixed.

    You need to sign in to your Microsoft account to add a comment.

    Sign in