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