Skip to content

Really strange scrolling issue when paging with firefox #562

@tswfi

Description

@tswfi

Sometimes scrollTo(0,0) does not work in firefox. This is really strange and I cannot even reproduce this all the time, but enough to be really annoying :D

Steps to reproduce

  1. with "default demo products" change the pagesize to 3 (easier to get pager)
  2. go to "art" category (it should have three pages as the pagesize is small)
  3. scroll a bit to see the pager (important, also it seems that the viewport size also affects this a bit)
  4. change page
    =>
    window.scrollTo(0, 0);
    tries to scroll to top but it doesn't always happen (no errors, nothing).

It looks like firefox gets confused when the content changes and it doesn't always understand that it should scroll.. (also tried adding a small delay with setTimeout but that didn't seem to work either)

I can force it to work consistently by adding window.scrollTo(0,1) before the window.scrollTo(0,0) but that seems wrong.

This does not seem to ever happen with chrome.

As a side not the scrolling should probably happen to be at the top of <div id="products"> so that for mobile users the products are shown even if the header is tall.. In place of window.scrollTo(0,0) should be something like

document.getElementById('products').scrollIntoView(true); 

and as we have a fixed header give it some scroll margin

section#products {
  scroll-margin-top: 150px; /* really the height of header */
}

In my opinion the scroll-margin-top should be set so that in desktop view the text "There are 8 products" is still visible and in mobile view filters and sort order are still visible

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions