[PR] fix: stabilize Examples page layout and sidebar scroll in Firefox [echarts-examples]

["julien-deramond (via GitHub)" <gi...@apache.org>]

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: commits-unsubscribe@echarts.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org


---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org

Re: [PR] fix: stabilize Examples page layout and sidebar scroll in Firefox [echarts-examples]

["plainheart (via GitHub)" <gi...@apache.org>]

plainheart merged PR #160:
URL: https://github.com/apache/echarts-examples/pull/160


-- 
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: commits-unsubscribe@echarts.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org


---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org