recently, while preparing the 22.0 release of this website, I noticed that the click events on the index page were not working on Apple devices, and as such the navigation flow was completely broken. This issue was not present on any other platform that I tested, including other mobile devices and desktop browsers.
after some quick searches and tests, I found out that the issue was related to the way iOS handles click events, and it is a known "bug" that has been around for a while. The problem is that iOS does not handle click events as expected, and as such, the event delegation mechanism that works on other platforms does not work on iOS.
the issue is related to the way iOS handles the click event, and it is
documented in the Apple Developer Documentation.
here is the "offending" code that was causing the issue:
sections.forEach(({ button, section }) => {
window.addEventListener('click', (event) => { /* ... */ });
});
after some investigation
[1]
[2]
(and Claude's help), I found out that the issue was related to
event bubbling.
By simply moving the event listener from the window object to the document
object and flipping the loop to iterate over the sections last, the issue was
fixed.
here is the updated code that works on all platforms:
document.addEventListener('click', (event) => {
sections.forEach(({ button, section }) => { /* ... */ });
});
Claude also suggested some other changes to the code, such as introducing
preventDefault() for certain events, using touchend along with click for
better compatibility, and the mentioned change of the loop order, avoiding the
addition of separate event listeners.
Thanks, Claude!