search

gustavoguanabara / html-css

Curso de HTML5 e CSS3
https://gustavoguanabara.github.io/html-css/
MIT License
14k stars 3.36k forks source link

Problemas ao acessar o desafio 12 via celular (iOS) #193

Open Leal86 opened 2 years ago

Leal86 commented 2 years ago

Boa noite a todos,

realizei o desafio 12 e consegui por no ar pelo github pages, entretanto quando tento realizar o acesso via celular o efeito paralax não funciona, alguém tem alguma solução para esse problema?

obs.: Meu celular e um Iphone 8.

att. Alexsander Leal

Leal86 commented 2 years ago

Boa noite @Sidney-Scholze, tem certeza? O seu aparelho celular roda com iOS ou Android? Pois no meu aqui, como citei é iOS ainda não funciona, eu até testei em outros (todos iOS) e não funcionaram :-( .

Leal86 commented 2 years ago

Então @Sidney-Scholze, a página funciona certinha, com todas as informações e tudo, porém as imagens não tem o efeito parallax, sendo a primeira imagem ficando embasada e a segunda esta muito grande e aparece pouco como se "cover" no css não tivesse sido aplicado

Leal86 commented 2 years ago

Bom dia @Sidney-Scholze pelo que verifiquei e testei, tudo indica que pode ser um problema de incompatibilidade com iOS, pois eu baixei o google Chrome e testei e fico da mesma forma que no safari, depois eu consegui testar num celular com android e o efeito parallax funcionou perfeitamente como vc tinha citado anteriormente, vou continuar pesquisando pra ver se acho algo que possa sanar essa incompatibilidade e volto aqui pra postar ou caso algum colega que já conseguiu resolver esse problema poderá dividir conosco essa solução.

GabrielChiarelli commented 2 years ago

Também estou passando pelo mesmo problema. O site funciona direitinho, mas o parallax quebra no IOS. Dei uma pesquisada e, pelo o que vi, não é um problema do código em si, mas sim de uma limitação que alguns navegadores de smartphones possuem. Pelo visto, essa limitação existe para prevenir que os sites fiquem muito pesados em certos celulares (mas, aparentemente, existem outros métodos para contornar esse problema, usando o JavaScript). Tirei essa informação desse site gringo: [https://forum.blocsapp.com/t/problems-with-parallax-effect/10458]

BenjamimCS commented 2 years ago

Bom dia @Sidney-Scholze pelo que verifiquei e testei, tudo indica que pode ser um problema de incompatibilidade com iOS, pois eu baixei o google Chrome e testei e fico da mesma forma que no safari, depois eu consegui testar num celular com android e o efeito parallax funcionou perfeitamente como vc tinha citado anteriormente, vou continuar pesquisando pra ver se acho algo que possa sanar essa incompatibilidade e volto aqui pra postar ou caso algum colega que já conseguiu resolver esse problema poderá dividir conosco essa solução.

O próprio Guanabara disse certa vez no curso que a base do Chrome no IOS é o Safari, não Chromium como é comumente. Acho que seja o mesmo para todos os outros navegadores no IOS, até porque isso parece ser algo característico da Apple ao meu ver.

No Mozilla Developer é dito o Safari ter compatibilidade com a propriedade mas não com o valor fixed, no qual diz ser parcial. Recomendo que deem uma olhada.

Mano, o melhor jeito possível para isso é com JavaScript creio eu. Li um artigo certa vez mostrando como adquirir o efeito — não testei, mas dá pra conferir o resultado. Tem um comentário interessante lá também. @Leal86

Espero poder ter ajudado. Bons estudos.

arnaldo3636 commented 2 years ago

O meu está funcionando normal, tanto no PC como no celular

Em sáb, 26 de mar de 2022 16:42, Leal86 @.***> escreveu:

Boa noite a todos,

realizei o desafio 12 e consegui por no ar pelo github pages, entretanto quando tento realizar o acesso via celular o efeito paralax não funciona, alguém tem alguma solução para esse problema?

att. Alexsander Leal

— Reply to this email directly, view it on GitHub https://github.com/gustavoguanabara/html-css/issues/193, or unsubscribe https://github.com/notifications/unsubscribe-auth/AYJOK7QMYCHKXFEAQ2F42PTVB5SDRANCNFSM5RXR4FNQ . You are receiving this because you are subscribed to this thread.Message ID: @.***>

LucasVieiraDev commented 1 year ago

Olá, tive o mesmo problema quando realizei meu projeto, pesquisei um pouco sobre o assunto e achei a mesma resposta que o @GabrielChiarelli , um absurdo os aparelhos da Apple não serem compatíveis com todos estilos do CSS até hoje. Meu celular já esta na versão 17 do iOS, mas não é compatível.

Mas, pesquisando sobre algum método diferente para ter o mesmo efeito, vi que dava para fazer o parallax usando "div's" para colocar as imagens e utilizar nessas div's o "position: sticky", e utilizei uma "div" com "position: absolute" onde coloquei todo o conteúdo, assim ela fica sobre as outras div's com as imagens.

Abaixo deixei os links para quem quiser dar uma olhada.

Minha pagina Cordel Moderno Meu repositório github

Acredito que ficou bom, se alguém tiver algo a acrescentar, seria um prazer.

Bons estudos a todos, valeu.