Steps to reproduce
The fixed background image looks horrible when you scroll up/down using the mouse wheel.
Fixed element or background image shouldn’t move at all when you scroll.
Dev Channel specific:
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:
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: #ff5722 url(…/backgrounds/aviao.jpg) center center;
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
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.
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!
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 can find an other example in the description of the following issue: https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/13178662/
I found another example of a fixed background stuttering/jumping during scrolling and filed it, as Microsoft’s Matt R. asked we do. Here it is, is anyone else able to reproduce? https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/14118464/
The link here is really bad on my computer - but I also have the problem that every new page in Edge jumps when scrolling, but only the first time. Second time the scrolling is gone. No other browser does this.
I have tried all the mentioned tricks I can find but no improvement.
Still “Not reproducible” when countless people have provide good examples of pages where this issue is extremely evident? If you want community involvement, this is not how to do it. This issue is clearly reproducible and has been so forever.
I’ve experienced this issue on an background image that I set on body.
In my case I was able to fix this issue by removing display: table;
I think I found the fix to the scrolling issues (at least for my sites)
So I have the two sites below, for now, the first one has not been updated to reflect the fix. The second site also has fixed background images and DOM elements, so what gives? Why is only the first site jumping around sporadically?
Finally, it hits me. For the first site, in my newbie ways, I had the wrapper styled with position: absolute since I was trying to center it using margin: 0 auto; When I removed the position style for the wrapper in dev tools, the scroll jumping finally resolved itself.
So my theory for this problem is that Edge has problems rendering a page with both absolute and fixed positioned content.
It looks like this didn’t post with my account information. If people need to follow up with this problem, I’m booellean(at)outlook.com
Here is a gif screen capture on the website I’m currently working on, as you can see every time I scroll up and down the bouncing is noticeable, it’s like there is some delay. This is currently reproducible in EI and EDGE.
This call was opened on Dec/15, and has not yet been resolved.
I have some examples too, if that’s what you need:
CSS Background Images: