Parallax/Rally effect does not work on Chrome for Android, but works on desktop

Asked

Viewed 354 times

0

I have this page: http://einconformado.blogspot.com.br/p/livraria-do-eterno-inconformado.html where I use the parallax/Parallax effect, and yes, the effect works smoothly on Chrome and Firefox (desktop versions), but In Chrome for Android, the effect doesn’t work, getting "normal" without the Parallax style itself (parallax works even on IE11 on Windows Phone, but won’t pick up Chrome 65 mobile)

Anyone who proposes to check using Chrome, can see that on the desktop flows, but on Android, no. What can be?

I am not using plugins for this purpose, only pure CSS.

$(function () {
$('a[href="#compartilhar"]').on('click', function(event) {
event.preventDefault();
$('.social_fix').addClass('open');
});

$("#main-wrapper").on("click", function(e) {var fechar = $(".social_fix.open").css('opacity'); if (fechar == 1) {$('.social_fix').removeClass("open");}});
$(document).keyup(function(event) {if (event.keyCode == 27) {$('.social_fix').removeClass('open');}});
});

function Copy() {urlCopied.innerHTML = window.location.href;}
function copyToClipboard(element) {var $temp = $("<input/>"); $("body").append($temp); $temp.val($(element).text()).select(); document.execCommand("copy"); $temp.remove(); alert("Link copiado para a área de transferência.");}
@media only screen and (max-width:319px) {.bgimg-1 {min-height: 260px!important} .um span.border {line-height:26px!important; font-size:30px!important; letter-spacing:2px!important} .um {top:2%!important} .escuro .border-dois {font-size:13px!important}}
@media only screen and (max-width: 479px) and (min-width: 320px) {.um span.border {padding:47px!important; font-size:50px!important; letter-spacing:-3px!important} .caption {top:15%!important; padding:27% 0} .border-dois, .border-tres, .border-quatro {padding:1px; font-size:32px; letter-spacing:4px; line-height:1.4em} .um {top:10%!important} .bgimg-1 {min-height:430px!important} .escuro .border-dois {font-size:13px!important}}
@media only screen and (max-width: 767px) and (min-width: 480px) {.um span.border {font-size:55px!important; letter-spacing:-1px!important; padding:55px!important}}
@media only screen and (max-width: 979px) and (min-width: 768px) {.um span.border {font-size:70px!important; letter-spacing:-4px!important; line-height:1.1em!important}}
@media only screen and (max-width: 3000px) and (min-width: 980px) {.um span.border {letter-spacing:-4px!important; line-height:1.1em!important} .um {padding:5% 0} .border-dois, .border-tres, .border-quatro {font-size:80px; letter-spacing:4px; line-height:1em} .css-text-mask {font-size:80px!important}}
@media only screen and (max-device-width: 1024px) {.bgimg-1, .bgimg-2, .bgimg-3 {background-attachment:scroll}}

h3 {letter-spacing:5px; text-transform:uppercase; font:20px "Lato", sans-serif; color:#D80000; text-align:center}
.bgimg-1, .bgimg-2, .bgimg-3 {position:relative; opacity:0.65; background-attachment:fixed; background-position:center; background-repeat:no-repeat; background-size:cover}
.bgimg-1 {background-image:url("https://lh3.googleusercontent.com/t9mRHg_UqWfOLsZ1RzYzX48k1z1H68-qT_12SU0ZPUMyprqFrybFtTLzFTMI6DL2YSObnoerAbBaCdhPufZgXQZPRZ9AD-Q04Z302Y8zA96c58yX-u0VqnRXsNTuFyife_g7-kNsbw=w1075-h666-no"); min-height:520px}
.bgimg-2 {background-image:url("https://lh3.googleusercontent.com/T26XJTBwbHQTrj-KzXsAVw5s5n-Ckbcq-rEKRJsYSgnZ4O5yJEN_sC5RBKUeshtnK1-mYIIjOphuzGuAPtpvrxzeE5Y9_Un31u33gcWzXNBpjtBnDHTKcDKJiP9vEofFZ4CRBZYxQA=w1011-h666-no"); min-height:400px}
.bgimg-3 {background-image:url("https://lh3.googleusercontent.com/-ZRH2HqG_Jq0/VkzgpCeNtoI/AAAAAAAAEKU/h5FvYT7NwUU/s800-Ic42/inkinwater11.jpg"); min-height:400px}
.border-dois, .border-tres, .border-quatro {padding:10px; background-color:#D80000; font-size:25px; color:#f7f7f7; cursor:pointer}
.border-dois:hover, .border-tres:hover, .border-quatro:hover {background-color:#A80000}
.boxtextop {color:#ddd; background-color:#282E34; text-align:center; padding:40px; text-align:justify; position:relative; box-shadow:0px 2px 3px rgba(0,0,0,.45)}
.caption {position:absolute; left:0; top:50%; width:100%; text-align:center; color:#000}
.caption a {color:#fff!important; position:relative; text-transform:uppercase}
.caption a:before {content:""; position:absolute; width:100%; height:2px; bottom:0; left:0; background-color:#fff; visibility:hidden; transition:all 0.3s ease-in-out 0s; transform:scaleX(0)}
.caption a:hover:before {visibility:visible; transform:scaleX(1)}
.css-text-mask {text-align:center; font-size:50px; color:#000; background-clip:text!important; -webkit-background-clip:text!important; background:url(https://lh3.googleusercontent.com/y9MKda9i5hObwu7SqD5NsJ_s6ny0c8VsR1U9iAqlTtG89vYkkfEszcsMpwYUQz3MkTFtSwXbGtB0ZWLQPIH7bV53rXwFOfAeIeNMdBmuu61QYNLY1svefhpG2x_iQvEdgCjf1CSZdnWx9EVJr0YbGfxDMg346wxk0MRfoNSgZlQdlwNeNHCah_la2GAsG_c_mEmMmwKTY9caUDC4hSXGwTuvdmGvsAKBuU7lHp9_04Hq_komqmEM83M1exK1BvZsdxyCPZRZEEOuSDSR_28e4t3WQfqkjXBflZ0OSX_oz2rztnr4T8aYtqO_6KxGFH5NOxFrSqb2sd4YLO5hgN_PV3US03-8txEJIi1iXdRXG3_y4YPpok1nTCJzxUGoaIcXv4dszQ3GdM055lIKkgSNRm6FXe5JgyllEw5shP3jCH9Q9k93P9YKnVOMjbcNSQ4433VFVgNOt9qQTwYX1KiPijPInB0mv87YygB0HYUc5woZk4hO8es2rBqgJ5zwiYXYPs3rPrsrsvbKJlIPCi3FZN7KH6lEw8_53-59ULG1AccZegXQnB6LbCkHMdi2KqtqJ_UXALS1JqcaO3bFUEGaho-37EGUvG4Yem7DzgGag1OblouOrEXhd7vv69mrWNneYggRkdeRfr-oMALVxiWxH1Sh_zJDq1Pp=w700-h490-no) 0 0 / 25%; -webkit-text-fill-color:transparent; text-fill-color:transparent; line-height:50px; font-family:Oswald; font-weight:bold; text-transform:uppercase}
.escuro h3 {color:#ff0!important}
.escuro .bgimg-1, .escuro .bgimg-2, .escuro .bgimg-3 {opacity:1!important}
.escuro .border-dois, .escuro .border-tres, .escuro .border-quatro {background-color:#000!important; border:3px solid #ff0}
.escuro .border-dois:hover, .escuro .border-tres:hover, .escuro .border-quatro:hover {background-color:#000!important; border:3px solid #1aebff}
.escuro .boxtextop {background-color:#000!important}
.escuro .css-text-mask {filter:brightness(10%)!important}
.post-body {padding:0!important}
.um {top:25%; text-align:center; position:absolute; left:0; width:100%}
.um span.border {background-color:#111; color:#fff; padding:18px; font-size:25px; letter-spacing:10px}

ul.social_menu {font-size:200%; text-align:center}
ul.social_menu li a {height:33px; position:relative; text-decoration:none; color:#fff!important}
ul.social_menu li a:before, ul.social_menu li a:hover:before {display:none!important}
ul.social_menu li::before {font-family:fontawesome; color:#fff; font-size:85%}
.social_fix {padding:0 0 0 5px; position:fixed; top:0; left:0; width:15%; height:100%; background-color:rgba(0,0,0,.99); opacity:0; z-index:999999; transform:translate(-100%, 0%); box-shadow:7px -3px 16px rgba(0,0,0,0.9); transition:all 0.5s cubic-bezier(1,0,0,1); overflow:auto}
.social_fix.open {transform:translate(0, 0) scale(1, 1); opacity:1}
.social_txt span {font-size:85%; font-family:Open Sans; padding:0 18px; color:#fff}
.texto_compartilhe {font-family:Oswald; font-size:3em; text-transform:uppercase; text-align:center;	color:#fff; padding:0 9px; line-height:100%}
#social_menu_animation:hover li {opacity:0.2}
#social_menu_animation li {-webkit-transition-property:opacity; -moz-transition-property:opacity}
#social_menu_animation li:hover {opacity:1}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div class='social_fix'>
<p class='texto_compartilhe'>Envie nosso livro para alguém!</p>
<div class='social_txt'>
<ul class='social_menu' id='social_menu_animation' style='padding:0!important'>
<li class='fa fa-facebook'><a href='https://www.facebook.com/share.php?v=4&+++src=bm&+++u=http://einconformado.blogspot.com/p/livraria-do-eterno-inconformado.html+++&+++t=Conheça%20o%20(primeiro)%20livro%20do%20Eterno%20Inconformado:&ext=1521256863&hash=Aea-I82uDdeTUmtX' onclick='window.open(this.href,&quot;   sharer&quot;   ,&quot;   toolbar=0,status=0,width=626,height=436&quot;   );   return false;   ' rel='nofollow' title='Espalhe no Facebook'><span>Facebook</span></a></li>
<li class='fa fa-twitter'><a href='http://twitter.com/intent/tweet?text=Conheça%20o%20(primeiro)%20livro%20do%20Eterno%20Inconformado:%20http://einconformado.blogspot.com/p/livraria-do-eterno-inconformado.html' rel='nofollow' target='_blank' title='Espalhe no Twitter'><span>Twitter</span></a></li>
<li class='fa fa-whatsapp' id='whats-celular'><a data-action='share/whatsapp/share' href='whatsapp://send?text=Conheça%20o%20(primeiro)%20livro%20do%20Eterno%20Inconformado:%20http://einconformado.blogspot.com/p/livraria-do-eterno-inconformado.html' rel='nofollow' title='Espalhe no WhatsApp'><span>WhatsApp</span></a></li>
<li class='fa fa-whatsapp' id='whats-pc'><a data-action='share/whatsapp/share' href='https://web.whatsapp.com/send?text=Conheça%20o%20(primeiro)%20livro%20do%20Eterno%20Inconformado:%20http://einconformado.blogspot.com/p/livraria-do-eterno-inconformado.html' rel='nofollow' target='_blank' title='Espalhe no WhatsApp'><span>WhatsApp</span></a></li>
<li class='fa fa-google-plus'><a href='https://plusone.google.com/_/+1/confirm?url=http://einconformado.blogspot.com/p/livraria-do-eterno-inconformado.html' onclick='javascript:window.open(this.href,&quot;   &quot;   ,&quot;   menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600&quot;   );   return false;   ' rel='nofollow' title='Espalhe no Google+'><span>Google+</span></a></li>
<li class='fa fa-envelope'><a href='mailto:?subject=Conheça%20o%20(primeiro)%20livro%20do%20Eterno%20Inconformado%21 &amp;body=http://einconformado.blogspot.com/p/livraria-do-eterno-inconformado.html' rel='nofollow' title='Espalhe por e-mail'><span>E-mail</span></a></li>
<li class='fa fa-clone'><a href='javascript:void(0);' onclick="Copy(); copyToClipboard('#urlCopied');" title='Copie a URL do nosso livro para enviá-la a alguém'><span>Copiar URL</span></a><textarea id="urlCopied" style="display:none" rows="3" cols="30"></textarea></li>
</ul>
</div></div>

<div class='bgimg-1'>
 <div class='um'>
 <span class='border css-text-mask'>O (primeiro) Livro do Eterno Inconformado</span>
 </div>
 </div>
 
 <div class='boxtextop'>
 <h3>A obra</h3>
 <p>O (primeiro) Livro do Eterno Inconformado é composto por 23 capítulos que abordam de maneira metafórica e prosaica o confronto que temos após revermos sob a ótica cristã o mundo e os desafios cotidianos.</p>
 <p>Além de reflexões pessoais (contextualizadas e embasadas biblicamente) a respeito de diversos temas, nosso primeiro livro é um compêndio de alguns dos textos publicados entre Junho de 2012 e Agosto de 2016 em nosso blog; textos esses reeditados para compor a obra e, além deles, o livro traz ainda vários textos inéditos compostos durante esse período.</p>
 <p>Nosso objetivo é glorificar a Deus e crer que Ele fale contigo, amado leitor, da maneira que Lhe for agradável. Cremos que - como a Palavra nos ensina em 1 Coríntios 14:3 – aquilo que Ele tem nos ensinado sirva para consolo, edificação e exortação (e, não, nosso livro não é autoajuda) de todo aquele que ler o (primeiro) livro do Eterno Inconformado.</p>
 </div>
 
 <div class='bgimg-2'>
 <div class='caption'>
 <span class='border-dois'><a href='https://www.behance.net/gallery/61953937/O-(primeiro)-Livro-do-Eterno-Inconformado-Ilustracoes' target='_blank' title='Aprecie 23 imagens instigantes em nosso (primeiro) livro!'>Imagens Instigantes!</a></span>
 </div>
 </div>
 
 <div class='boxtextop'>
 <p>Em O (Primeiro) Livro do Eterno Inconformado, você também encontrará 23 imagens surrealistas e metafóricas que ilustram cada capítulo ao trazer de maneira implícita a mensagem abordada pelos textos e, certamente, a interpretação de cada uma delas irá variar de acordo com a percepção do leitor. Clique <a href='https://www.behance.net/gallery/61953937/O-(primeiro)-Livro-do-Eterno-Inconformado-Ilustracoes' target='_blank'>aqui</a> para conhecê-las!</p>
 </div>
 
 <div class='bgimg-3'>
 <div class='caption'>
 <span class='border-tres'><a href='#compartilhar' title='Compartilhe o (primeiro) livro do Eterno Inconformado com os coleguinhas!'>Espalhe!</a></span>
 </div>
 </div>
 
 <div class='boxtextop'>
 <p>O (primeiro) Livro do Eterno Inconformado é um material autoral e registrado disponibilizado gratuitamente. É proibida, sem a prévia autorização por escrito do autor, sua reprodução (incluindo quaisquer formas de cópia e/ou distribuição) para fins comerciais e/ou lucrativos. Todavia, é autorizada e incentivada a reprodução e distribuição desta obra, desde que referencie a fonte, não altere o conteúdo original, nem o utilize para fins comerciais como reiterado.
 <p>Para sugestões, críticas, comentários, pedidos de oração ou outro assunto de teu interesse, acesse nosso formulário de contato ou nos envie um e-mail.</p>
 <p>Para contato com o autor, envie um e-mail para: <a href='mailto:[email protected]'>[email protected]</a></p>
 </div>
 
 <div class='bgimg-1'>
 <div class='caption'>
 <span class='border-quatro'><a title='Baixe o (primeiro) livro do Eterno Inconformado em PDF' href='https://dl.dropbox.com/s/zuaw2vm1wig1w3m/o-primeiro-livro-do-eterno-inconformado-pdf.pdf?dl=1' target='_blank'>Baixar PDF</a></span>
 </div>
 </div>

  • Applied the <meta name="viewport" >??

  • Yes, @Guilhermenascimento. But, it doesn’t work. =\

  • Like this is yours <meta name="viewport">? Put him here please

  • ih guy, paralax effect on Isp. furniture is a problem.... do not claim these effects work on desktop and mobile alike... usually on Disp. mobile and people simplify the thing to the maximum... paralax effect in Disp. mobile does not serve for much... who accesses your site in Disp. mobile want practicality and not spend the data franchise. As said the late Marcelo Rezende: "go seeing"..

  • @Guilhermenascimento <meta content='width=device-width, initial-Scale=1, Maximum-Scale=1' name='viewport'/>

  • Not even on iPhone worked, it turns gray in the background instead of the image

  • You could show me a screenshot of how it appears on iPhone, @Guilhermenascimento ? [email protected] (I don’t know if you insert images here). Thanks, man!

Show 2 more comments
No answers

Browser other questions tagged

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