background-attachment: fixed interfering with background-size

Question

I've got a background image scaled to fit inside its container, and I have appropriate fallbacks (not shown) for when Modernizr detects that the browser does not support background-size.

.wrap {     width: 200px;     height: 116px;     position: absolute;     background-image: url(image.jpg);     background-attachment: fixed;     background-position: 0 0;     background-size: 200px 116px;     background-repeat: no-repeat; } 

Here's an example: http://jsfiddle.net/crowjonah/6xYNm/

It looks beautiful in Chrome, Firefox, Safari (desktop and iOS), however I'm having trouble on some instances of Android.

Here's a UA for a device that displays correctly:

Mozilla/5.0 (Linux; U; Android 4.0.4; en-us; Xoom Build/IMM76L) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Safari/534.30 

and here's a UA for a device that doesn't:

Mozilla/5.0 (Linux; U; Android 4.2.2; en-us; sdk Build/JB_MR1.1) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30 

The newer version of Android (emulated) scales the fixed background image to be all blown out and pixellated in order to fit (I think) the viewport, and does not heed the size of its container or the defined background-size.

And that's all fine. In fact, that's what MDN says will happen:

If the background's attachment is fixed, the background positioning area is instead the entire area of the browser window, not including the area covered by scrollbars if they are present.

My problem is that I don't know how to reasonably detect when that will or won't be the case so that I can adjust accordingly. Because of the layout and animations on the page, I really do want the background to be fixed for all browsers that support it well, and can settle for scroll in this outlying case if I can figure out how to target it.

Update (10/3/2013): In order to prevent confusion, I've updated the fiddle to demonstrate a more realistic and problematic example that justifies more of the CSS properties I've defined: http://jsfiddle.net/crowjonah/QtpVN/

Answer 1

you could prepare the CSS within two classes .works {...} and .does_not_work {...}, and then check things via JavaScript, to answer the question, which case you is faced with. Depending upon the result, the JavaScript will just adjust for these CSS classes above. In the end, who is going to switch off JavaScript within her mobile phone (i.e. Android)? What Do you think about this idea? Regards, M.

Answer 2

Remove background-size add display:block;

And try it again