4

Tenho um layout que funciona muito bem no desktop, mas ao visualizar no Safari do iOS (iPad especificamente) ele não aparece como esperado. Eu quero que o background da div permaneça fixo ao rolar a página. Alguém sabe como corrigir esse problema?

css

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

html

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

3 Respostas 3

4

Na verdade, o seu background está fixo. O problema é o "viewport"...

Primeiro, vamos recapitular por que o posicionamento fixo não funciona como esperado. O Safari Mobile usa um "viewport" para mostrar websites. Imagine um livro diante de você. Pegue um pedaço de papel, corte um quadrado 320×416 no mesmo, e coloque o papel com o quadrado aberto no meio sobre o livro. Para ler o livro, mova o papel e posicione o buraco sobre as palavras que você quer ver. Isso é exatamente o que o "viewport" do Safari Mobile está fazendo. Quando você toca e arrasta, você está movendo o "viewport" por sobre o site, que continua estático "abaixo" dele.

Isso faz com que o posicionamento fixo se torne nulo e inútil no iPhone. Um elemento que tem posicionamento fixo está afixado ao body, e não ao viewport. Ou seja: o fixed está atualmente funcionando como desejado, apesar de que gostaríamos que estivesse afixado ao "viewport".

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

2
  • 1
    Foi o que eu imaginei, pois nenhum site que utiliza este recurso estava funcionando corretamente no iPad. Obrigado.
    – Paulo
    Commented 6/02/2014 às 20:30
  • Após uma rápida pesquisa, me parece que a opção "snap" da biblioteca iScroll consegue contornar o problema: iscrolljs.com/#snap - boa sorte!
    – J. Bruni
    Commented 6/02/2014 às 20:35
0

@PauloMaciel,

deixe seu id assim:

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

Ou tente:

@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;
  }
}
3
  • Continua apresentando o mesmo problema no iPad.
    – Paulo
    Commented 6/02/2014 às 20:13
  • Esta testando com simulador ou dispositivo mesmo? Commented 6/02/2014 às 20:16
  • Estou testando no próprio iPad, já tentei de várias formas solucionar mas o problema persiste, inclusive sites que utilizam este recurso também não funcionam no iPad.
    – Paulo
    Commented 6/02/2014 às 20:19
-1

Já testou em outro iPad? Tem certeza que não é um erro do teu iPad. Uma vez tive um problema de visualização de margem no firefox. Fiz de tudo e nada. Então em outro pc que tinha só o chrome (e a porcaria do IE) eu instalei o firefox e funcionou bem. Não sei o que causou o problema no meu firefox, eu tinha windows7. Por outros motivos eu tirei o windows e passei a usar linux (que o firefox é padrão) e agora o firefox não apresenta aquele erro. Talvez seja algo parecido com o teu iPad.

1
  • Não é um problema do meu iPad, iOS é diferente de Windows, esse comportamento é padrão nesse sistema.
    – Paulo
    Commented 1/10/2015 às 3:45

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .