Responsive site not working correctly in Chrome
Hello all
Originally my website worked fine in all the browsers but has suddenly started to play up in Chrome.
As you scroll down the page there are 2 background images that display behind white space consecutively, but in Chrome the first image disappears just leaving white space where the second image is supposed to be.
Difficult to understand, but if you view the site in Edge and then Chrome you will get the idea.
The site is www.actionitcs.com
Thanks in advance for any input
Re: Responsive site not working correctly in Chrome
See the problem and it might be a chrome bug.
You could try if adding the following to the page head code fixes it:
Code:
<script>$(function(){setTimeout(function(){if(xr_chrome)$(".parallax,.parallax2").css("will-change","transform");},1000);});</script>
Found a hint for that at stackoverflow but didn't fully test it. Just tried if directly adding the css in the developer console in chrome helped, and it did. But adding the same to firefox caused another problem, so adding some code seems the quickest solution.
Re: Responsive site not working correctly in Chrome
Thanks Siran
Will give that a try
Re: Responsive site not working correctly in Chrome
Re: Responsive site not working correctly in Chrome
No luck mate
Appreciate the effort though
Re: Responsive site not working correctly in Chrome
Not sure why it didn't work, but this should. You need to place it at the page body instead of the head.
Code:
<script>
if(navigator.userAgent.indexOf('Chrome')>=0){
document.getElementsByClassName("parallax")[0].style.willChange="transform";
document.getElementsByClassName("parallax2")[0].style.willChange="transform";
}
</script>
If you consider to use it I recommend you try it on older versions of Chrome too before uploading to your site.
Re: Responsive site not working correctly in Chrome
This is a fully functional variant with multiple parallaxes:
<script>$(function(){setTimeout(function(){if(xr_c hrome)$(".parallax,.parallax2,.parallax1,.parallax 3").css("will-change","transform");},1000);});</script>
Re: Responsive site not working correctly in Chrome
Thanks Siran
That did work.
Spamiky thanks for the input.