How do I fix the background of a <div> in iOS Safari (iPad)?

Asked

Viewed 1,686 times

4

I have a layout that works very well 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 issue?

css

#caixa{
    background:url(imagem.jpg) no-repeat center center fixed;      
    height:300px;
    width:300px;
}

html

<div id="caixa"></div>
html css

3 answers

4


Actually, your background is fixed. The problem is "viewport"...

First, let’s recap why the fixed positioning does not work as expected. Safari Mobile uses a "viewport" to display websites. Imagine a book before you. Take a piece of paper, cut a 320 416 square in the same, and place the paper with the square opened in the middle about the book. To read the book, move the paper and position the hole about the words you want to see. That’s exactly what the Safari Mobile’s "viewport" is doing. When you touch and drag, you are moving the "viewport" by over the site, which remains static "below" him.

This makes fixed positioning null and void in the iPhone. An element that has fixed positioning is attached to the body, and not to the viewport. That is: the fixed is currently functioning as desired, although we would like you to be posted to "viewport".

source: http://old.doctyper.com/archives/200808/fixed-positioning-on-mobile-safari/

  • 1

    That’s what I figured, because no site using this feature was working properly on iPad. Thank you.

  • After a quick search, it seems that the "snap" option of the iScroll library can get around the problem: http://iscrolljs.com/#snap - good luck!

0

@Paulomaciel,

let 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;
  }
}

  • Still having the same problem on iPad.

  • Testing with simulator or device?

  • I’m testing on iPad itself, I’ve tried several ways to solve but the problem persists, including sites that use this feature also do not work on iPad.

-1

Have you tried it on another iPad? Are you sure it’s not an error of your iPad. I once had a margin preview problem in firefox. I did everything and nothing. Then on another PC that only had Chrome (and the IE crap) I installed firefox and it worked well. I don’t 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 present that error. Maybe it’s something like your iPad.

  • It is not a problem of my iPad, iOS is different from Windows, this behavior is standard on this system.

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.