I’m experiencing an intermittent navigation issue on a completely fresh Horizon theme (no custom code or third-party apps installed).
Issue Summary
Occasionally, when clicking the logo or a top-level navigation link, the first click does not trigger navigation. A second click works immediately.
This happens randomly and cannot be reproduced 100% consistently, but it occurs more often in Chrome/Edge than in Firefox.
What I Have Verified
-
No
event.preventDefault()is being triggered. -
The anchor element is not being removed or replaced in the DOM.
-
Click events do fire normally.
-
No JavaScript errors appear in the console.
-
The issue occurs on a clean, unmodified Horizon theme.
Technical Findings
During interaction (especially on click), the <header-menu> custom element updates its inline style:
--submenu-opacity: 1;
--submenu-opacity: 0;
At the same time, a ResizeObserver callback fires on the header.
This triggers layout recalculation (flex/grid reflow).
I have confirmed via getBoundingClientRect() that the left header column shifts slightly (sub-pixel movement) during these updates.
If this layout shift happens between:
-
mousedown -
mouseup
the browser cancels navigation silently due to hit-testing rules (the element under pointer changes between down/up).
This explains why:
-
Click event logs still appear
-
No preventDefault is called
-
Navigation sometimes fails
-
A second click works
-
Chrome is more affected than Firefox (due to layout batching differences)
Conclusion
This appears to be a layout instability issue caused by ResizeObserver-driven header recalculation inside the <header-menu> component.
It is not a click handler issue or a JS conflict — it is a hit-testing invalidation caused by layout shift during interaction.
Could you please confirm whether this is a known issue with Horizon’s header implementation and advise on a recommended fix?