julien-deramond opened a new pull request, #160:
URL: https://github.com/apache/echarts-examples/pull/160
This PR fixes the sidebar navigation and scrolling behavior in Firefox on
the “Examples” page by:
1. Simplifying the layout of the main explore view using flexbox instead of
a float-based layout.
2. Removing an extra `activeItem.click()` call from the hashchange handler
that caused redundant scroll animations and misalignment in Firefox.
After this fix:
- Chrome retains its original behavior.
- In Firefox:
- Vertical scrolling works correctly; sections move naturally without
blank gaps.
- Clicking sidebar items scrolls directly to the correct section (e.g.,
“Bar”) and keeps the active state in sync.
## Issue
On Firefox (150.0.1 aarch64 macOS 26.4.1), here's the current User
eXperience at https://echarts.apache.org/examples/en/index.html
https://github.com/user-attachments/assets/ca5b625a-1743-4253-a478-ac5a02232ed1
On Firefox (150.0.1 aarch64 macOS 26.4.1), here's the new behavior (run
locally):
https://github.com/user-attachments/assets/3ffa2fc8-c3c5-4c90-b1ce-8c48f4376a03
## Fix Details
### 1. Layout: switch from float to flexbox
Previously, the main scroll container `#example-explore` was:
- Absolutely positioned with `overflow-y: auto`.
- Contained a left sidebar (`#left-container`) that used `float: left` +
`position: sticky`.
- Contained the main content (`#explore-container`) offset using
`margin-left`.
This combination (`absolute` + `float` + `sticky`) apparently caused Firefox
to miscompute the scrollable area: when scrolling down, you could see a large
blank gap in the viewport while sections like “Bar” stayed stuck at the bottom
instead of scrolling up, even though it worked in Chrome.
The suggested fix:
- makes `#example-explore` a flex container and remove float.
- lets the content take the remaining space via flex instead of `margin-left`
Using flexbox here gives a clear, predictable layout for both Firefox and
Chrome: the sidebar and content sit side-by-side, the scroll container is
unambiguous, and sections scroll normally without blank gaps.
---
### 2. Remove redundant `activeItem.click()` on hashchange
In `Explore.vue`, the hashchange handler used to call `activeItem.click()`.
From my understanding, it meant:
- When a nav item was clicked, `vue-scrollactive` already initiated a scroll
to the target.
- The subsequent hash update triggered `onHashChange`, which called
`.click()` again, starting a second scroll animation.
- In Firefox, with lazy-loaded thumbnails changing layout mid-scroll, this
double-scroll caused the view to end up between sections or snap back to the
previous section (“Line” instead of “Bar”).
The fix:
- Removes the `activeItem.click()` call and let `vue-scrollactive` handle
the initial scroll.
- Keeps `onHashChange` responsible only for keeping the left nav’s own
scroll aligned:
This eliminates redundant scroll animations and prevents Firefox from
“over-scrolling” or snapping back to the wrong section after layout changes.
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
