4

I am having an issue with a large fixed background image on IE10 touch devices. (I have a Samsung Slate with Windows 8, but am guessing that the same behavior can be seen on a Surface, but can't confirm.)

To have a large fixed image as the background for a site, there are two approaches:

1) Use CSS3 background properties on the body element - This works fine on IE10 touch devices. However, the background scrolls along with the viewport in iOS browsers. So on to step 2.

2) Place the background image inside the body element, either as an inline image or within a div. Set image (or containing div) as position-fixed with a low z-index. This solves the iOS issue and works fine on all browsers I've tested except when touch scrolling on IE10. The background image "jitters" or flickers up and down during the scrolls by a few pixels. Once the scroll is over, it is all rendered correctly, but the jitter effect looks horrible. This does not occur when using the CSS3 background properties on the body.

A simple site to see this effect is to use an IE10 touch device and browse to Backstretch. This jQuery plugin uses an image within a div in the body.

I'm stumped on how to fix this. It might just be a rendering bug, but it is annoying and forcing me to decide which browser to favor. Any ideas?

Kevin Lisota
  • 49
  • 2

1 Answers1

0

A quick and easy solution is to use Layout Engine. Layout Engine uses browser feature detection to detect the visitor's browser/browser version, and adds the corresponding style to the html tag (similar to Modernizr). It detects many popular browsers, including some mobile, and IE7, IE8, IE9, IE10 and IE11. This is useful because the jitter occurs in IE11 touch as well.

Using the exclusive IE10 and IE11 styles to add the background styles to the body and to turn off the default background solved the background jitter on IE10 and IE11 touch, and performed well during fairly heavy device/browser testing. The body background did not show in iOS or in other browsers, and the extra JavaScript had a minimal, though slightly noticeable effect on the download speed for mobile.

http://mattstow.com/layout-engine.html

Other solutions include CSS hacks, and JavaScript detection for IE10 and IE11 (similar to above). Use caution that your styles don't apply to other browser versions when using the css hacks, and JavaScript solutions based on User Agent detection.

You probably already know this, but the fixed background is buggy and can jitter in mobile devices too. One solution is to apply background-attachment:scroll instead of background-attachment:fixed; for the background in mobile devices. Possible solutions to target mobile devices include media queries using "max-device-width" to target smaller feature phone and smart phone screen sizes, and/or using Categorizr.js (detects Mobile, Tablet, Desktop, TV via browser user agent, and adds the appropriate style to the html tag).

Community
  • 1
  • 1
Talkingrock
  • 794
  • 6
  • 7