All geek questions in one place

Fixed background image on IE10 touch devices on scroll

I have a problem with a large fixed background image on IE10 touch devices. (I have a Samsung Slate with Windows 8, but I assume that the same behavior can be seen on the surface, but cannot confirm.)

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

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

2) Place the background image inside the body element, either as an inline image or in a div. Set the image (or containing div) as a fixed position with a low z-index. This solves the iOS problem and works fine in all browsers I tested, except when scrolling the touch screen on IE10. The background image trembles or flickers up and down while scrolling a few pixels. Once the scroll is finished, everything displays correctly, but the jitter effect looks awful. This does not happen when using CSS3 background properties on the body.

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

I don’t understand how to fix this. It may just be a rendering error, but it is annoying and makes me decide which browser I like. Any ideas?

+4
source share
1 answer

A quick and easy solution is to use the Layout Engine. The layout engine uses the browser detection feature to detect the browser browser / browser version and adds the appropriate style to the html tag (similar to Modernizr). It discovers many popular browsers, including some mobile ones, and IE7, IE8, IE9, IE10 and IE11. This is useful because jitter occurs when using IE11.

Using the exclusive IE10 and IE11 styles to add background styles to the body and turn off the background by default eliminates background jitter when using IE10 and IE11 and works well during fairly intensive testing of devices / browsers. The body background did not appear on iOS or other browsers, and additional JavaScript had a minimal, albeit insignificant, effect on download speed for mobile devices.

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

Other solutions include CSS hacks and JavaScript detection for IE10 and IE11 (similarly above). Be careful that your styles are not applied to other versions of the browser when using css hacks and JavaScript solutions based on User Agent detection.

You probably already know this, but the fixed background does not work and can shake on mobile devices. One solution is to use background-attachment: scroll instead of background-attachment: fixed; for background on mobile devices. Possible solutions for targeted mobile devices include media queries using "max-device-width" to adjust the size of the smaller functional phone and smartphone screen and / or using Categorizr.js (detects Mobile, Tablet, Desktop, TV through a browser user agent and adds appropriate style in html tag).

0
source

Source: https://habr.com/ru/post/1479459/

More articles:


All Articles