I have a website using a parallax theme that has not been updated in a while, but I don't have a child theme for it so I can't update the theme itself.
In the latest versions of Chrome, the JavaScript/navigation bar tabs do not perform the expected parallax actions/scrolling.
I assume this is likely a change to Chrome and how it interprets JavaScript, and I have been able to reproduce these issues on Chrome Version 73.0.3683.75 (Official Build) (64-bit).
The website is http://www.aircomfortcomplete.com/ - if anyone has experienced this issue or knows why Chrome is misinterpreting the code, I would really appreciate the help. This is something I need to do as a quick fix before I rewrite the template modifications as a child theme.
Basically I just don't want to ostracize all of my Chrome users while I work on a proper child theme.
Thanks for your time and help guys! =)
-Alexander
First you could only update jquery to see if the problem persist. If so, I would use the following quick fix:
.css file:
html {
scroll-behavior: smooth;
}
And in html i would comment out (disable) your smooth scroll plugin. Leave the links as they are, just make sure that preventDefault is not called.
<li>
<a href="http://aircomfortcomplete.com/#section-355">Promos</a>
</li>
<section class="parallax-section clearfix default_template" id="section-355">
...
</section>
EDIT: I understand you want to know which specific JavaScript method is wrong. But my guess is that there is method which is misbehaving and you could not solve the problem by replacing it. My suggestion is to use quick fix provided above
It seems theme use old version or jquery.nav.js and SmoothScroll.js jQuery and it create issue with latest Google Chrome so please update those two css from below repo then it will fine in your setup.
File Location:
/wp-content/themes/accesspress-parallax/js/SmoothScroll.js
/wp-content/themes/accesspress-parallax/js/jquery.nav.js
Latest jQuery:
https://github.com/gblazex/smoothscroll-for-websites/blob/master/SmoothScroll.js https://github.com/davist11/jQuery-One-Page-Nav/blob/master/jquery.nav.js
If you have a look in the dev console you can see the error message is coming from SmoothScroll.js. Chrome has introduced a restriction on scrolling event listeners, where unless they are specifically called as non-passive.
You'll need to update the event listeners to have the option {passive: false} for Chrome to respect the event.preventDefault() in the method. See https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener for more info on the method.
From scanning the code I think the line to update is the helper function addEvent on line 435 of SmoothScroll.js. Maybe something like the below?
function addEvent(type, fn, bubble) {
window.addEventListener(type, fn, {passive: false, capture: (bubble||false)});
}