9

Noticed an odd and annoying bug in IE11. Images placed in the background using css with background-attachment fixed do this odd up & down jiggle dance when scrolling. It primarily happens when using the scroll wheel or when using the arrow buttons on the scroll bar. if you scroll by dragging the scroll bar it doesn’t seem to happen.

try this fiddle: http://jsfiddle.net/G6Mdu/ when using IE you can see the image jiggle. On chrome, firefox, etc it works fine.

 #test{
     height: 510px;
     width:100%;
     background-position: center top;
     background-attachment: fixed;
     background-size: cover;
 }

any solutions?

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
Jose Ch.
  • 3,856
  • 1
  • 20
  • 34
  • Anyway, I'm not seeing a jiggle in IE11... – kmoe May 19 '14 at 17:20
  • @kmoe. here is a video with the problem: https://www.youtube.com/watch?v=OSIfRX3t1tM. left is google chrome right is IE 11 – Jose Ch. May 19 '14 at 18:28
  • This was a known bug in IE. We have fixed it. See [my answer here](http://stackoverflow.com/a/27971445/54680) for more information. – Sampson Jan 15 '15 at 19:35
  • This bug is still present in Windows 8.1 touch laptops using the latest version of IE11. It occurs using background-attachment: fixed. Disabling smooth-scroll fixes the problem, or using the workaround described here https://connect.microsoft.com/IE/feedback/details/819518/fixed-background-image-scrolling-issue by Hanoncs. But, it still happens when using touch, keyboard up/down or trackpad scrolling. – patrickzdb Jun 03 '15 at 15:22
  • I just came across a case where I was able to reduce the stuttering by removing `box-shadow` from elements that overlap the fixed background. – Rudey Mar 16 '17 at 10:06

1 Answers1

4

This is a known issue with the implementation of background-attachment: fixed in IE10+. I believe it occurs on all elements except <body>.

http://connect.microsoft.com/IE/feedback/details/819518/fixed-background-image-scrolling-issue

  • This bug is still present in Windows 8.1 touch laptops using the latest version of IE11. It occurs using background-attachment: fixed. Disabling smooth-scroll fixes the problem, or using the workaround described here https://connect.microsoft.com/IE/feedback/details/819518/fixed-background-image-scrolling-issue by Hanoncs. But, it still happens when using touch, keyboard up/down or trackpad scrolling. – patrickzdb Jun 03 '15 at 15:27