I have a layout that works great on the desktop, but when viewing in iOS Safari (iPad specifically) it does not appear as expected. I want the div background to stay fixed when scrolling the page. Does anyone know how to fix this problem?
#caixa{
background:url(imagem.jpg) no-repeat center center fixed;
height:300px;
width:300px;
}
<div id="caixa"></div>
In fact, your background is fixed. The problem is the "viewport" ...
First, let's recapulate why fixed placement does not work as expected. Safari Mobile uses a "viewport" to display websites. Imagine a book in front of you. Take a piece of paper, cut one 320 × 416 square, and load the paper with the square open. in the middle on the book. To read the book, move the paper and position the hole on the words you want to see. This is exactly what the Safari's "viewport" is doing. When you touch and drag, you are moving the "viewport" over the site, which remains static "below" it.
This causes fixed positioning to become null and void in the iPhone. An element that has fixed positioning is affixed to the
body, notviewport. That is,fixedis currently functioning as desired, although we would like it to be posted to the "viewport".
source: link
@PauloMaciel,
Leave your id like this:
#caixa{
background:url(imagem.jpg) no-repeat;
height:300px;
width:300px;
background-position: center center;
background-attachment:fixed;
}
Or try:
@media screen and (-webkit-min-device-pixel-ratio:0){
#caixa{
background:url(imagem.jpg) no-repeat;
height:300px;
width:300px;
background-position: center center;
background-attachment:fixed;
}
}
Have you tested on another iPad yet? You're sure it's not a mistake on your iPad. I once had a margin viewing problem in firefox. I did everything and nothing. So on another pc that had only the chrome (and crap of IE) I installed firefox and it worked fine. I do not know what caused the problem in my firefox, I had windows7. For other reasons I took out windows and started using linux (which firefox is default) and now firefox does not show that error. Maybe it's something like your iPad.