Environment
|
|
| Template |
Anobiz 1.0.0 (templates/anobiz/templateDetails.xml) |
| Framework |
Helix Ultimate 2.2.10 |
| Joomla |
6.1.3 |
| PHP |
8.3.33 |
| Browser |
Chromium 1xx / Firefox — reproducible in both |
File: templates/anobiz/js/main.js, around line 875–888 (the //Scroll Animation block).
Problem
The scroll-animation block queries #hero-video and .scroll-sequence unconditionally and then starts a requestAnimationFrame loop that dereferences video without a null check:
//Scroll Animation
const video = document.getElementById("hero-video");
const scrollSequence = document.querySelector(".scroll-sequence");
const VIDEO_DURATION = 4.04;
function update() {
if (!video.seeking) { // <-- line 881
const rect = scrollSequence.getBoundingClientRect();
...
video.currentTime = progress * VIDEO_DURATION;
}
requestAnimationFrame(update);
}
requestAnimationFrame(update);
On any page that does not contain a #hero-video element — which is every page of our site, and by default any page not built from the demo hero section — video is null and the first animation frame throws:
Uncaught TypeError: Cannot read properties of null (reading 'seeking')
at update (main.js:881:14)
When it fires
On every page load, immediately after main.js runs, as soon as the first animation frame is requested. It is thrown once (the exception aborts the update() call before the requestAnimationFrame(update) re-schedule at the end of the function), so it does not loop, but it appears in the console of every single page.
Impact
Functionally harmless — nothing else in main.js depends on that block, and the rest of the file continues to run because the error is thrown asynchronously inside the rAF callback rather than during script evaluation. It is still undesirable:
- it pollutes the browser console on every page, which masks real errors during development and QA;
- it shows up as a JavaScript error in Lighthouse/monitoring and in client-side error trackers;
- as a side effect, the
requestAnimationFrame(update) loop is also started on pages that have no video, so an empty frame loop would keep running if the guard were added only inside the function.
Proposed fix
A null guard on both elements, and starting the loop only when they exist:
function update() {
if (video && scrollSequence && !video.seeking) {
...
}
requestAnimationFrame(update);
}
if (video && scrollSequence) {
requestAnimationFrame(update);
}
This keeps the behaviour identical on pages that do have the hero video, removes the console error everywhere else, and avoids an idle rAF loop on pages where the animation is not used.
Thanks for looking into it.