Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
436 views
in Technique[技术] by (71.8m points)

html - Fixed body background scrolls with the page on iOS7

I've used the following CSS to ceate a fixed body background. It works well on almost all browsers except the new iOS7. On the latter the background is not fixed anymore. It scrolls with the page. Any idea how to fix the problem?

    body {
       background-color: #000; 
       background-image: url('../pics/backgrounds/blackWhite.jpg');
       background-repeat: no-repeat; 
       background-position: center;
       background-attachment: fixed;       
       webkit-background-size: cover;
       -moz-background-size: cover;
       -o-background-size: cover;
       background-size: cover;     
    } 

CHEERS

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

I'll try and find some reference, but mobile browsers force background: scroll because the repainting is too expensive.


Reference:

CSS - Background images not displaying properly on mobile browsers

@PaulIrish also noted this:

Fixed-backgrounds have huge repaint cost and decimate scrolling performance, which is, I believe, why it was disabled.

There are ways around this, though.. but it's not a quick fix. Have a look at the following question and it's comment.

Android/Mobile Webkit CSS Background-Attachment:Fixed Not Working?


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...