I'm Brett Slatkin and this is where I write about programming and related topics. You can contact me here or view my projects.

04 September 2013

Another example of web development these days

These properties don't interact correctly in Android Chrome or Android WebView:

background-attachment: fixed
background-size: covered

Work-arounds (like a position-fixed div) also don't work because of mobile Chrome's scrolling behavior:
  • When you scroll up, the tabs disappear, causing the whole viewport to shift upwards.
  • The viewport shift happens before the position fixed background updates, causing your page's background-color to be painted in the rectangle the tabs used to occupy.
  • However, the content of the page smoothly scrolls upwards, leaving a "half background image, half background color" look to your page.

Only take-away: Never use "fixed" positioning under any circumstances. You need to use JavaScript and handle scroll events.

Relevant bug threads here: Chrome, WebView
© 2009-2024 Brett Slatkin