background-attachment: fixed interfering with background-size

女生的网名这么多〃 提交于 2019-12-21 07:05:19

问题


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/


回答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.




回答2:


Remove background-size add display:block;

And try it again




回答3:


Have you tried

background-image:url(image.jpg); background-size: 100%;

take away position: absolute; background-attachment: fixed;



来源:https://stackoverflow.com/questions/16598637/background-attachment-fixed-interfering-with-background-size

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!