Scrolling issue on React page

[isaac-svg]

Page Scrolling Issue

Description

The page scrolling stops working as soon as the page is fully loaded.

To Reproduce

Steps to reproduce the behavior:

1. Visit Tw-Elements React.

Inspection

An un-handled exception was thrown. This is the error message: Uncaught TypeError: 'querySelector' called on an object that does not implement interface Element.

Screenshot of the error:

Desktop

• OS: Ubuntu
• Browser: Firefox
• Version: 124.0.1

[iprzybysz]

Hi @isaac-svg, thanks for reporting this bug. We will be mindful of it.

[zbagley]

@iprzybysz Just a heads up, this was almost a huge blocker for considering the library as it prevented me from viewing quite a large amount of the components. Though the error isn't resolve with this it worked as a hotfix: remove the body style overflow: hidden will make the docs fully accessible again.

[iprzybysz]

Hi @zbagley, we will try to fix it as soon as possible.

[iprzybysz]

We've implemented a fix for this issue. You should now be able to scroll through all pages. Please verify if it's working properly.

[zbagley]

Tested just now on both MacOS and Windows with firefox and chrome. Same issue persists on firefox:

Uncaught TypeError: 'querySelector' called on an object that does not implement interface Element.
    findOne templates.js:129
    _showElement templates.js:129
    show templates.js:129
    toggle templates.js:129
    r gtm.js:7
    <anonymous> line 660 > injectedScript:2
    a gtm.js:660
    b gtm.js:661
    of gtm.js:170
    e gtm.js:467
    Eb gtm.js:110
    ox gtm.js:468
    mx gtm.js:468
    tx gtm.js:468
    Cx gtm.js:473
    wy gtm.js:491
    zy gtm.js:495
    push gtm.js:499
    push js:369
    push destination:478
    ty gtm.js:490
    uI gtm.js:590
    e gtm.js:595
    f gtm.js:596
    q gtm.js:598
    setTimeout handler*I gtm.js:121
    q gtm.js:598
    <anonymous> gtm.js:599
    of gtm.js:170
    e gtm.js:467
    tx gtm.js:468
    Cx gtm.js:473
    wy gtm.js:491
    zy gtm.js:495
    push gtm.js:499
    push js:369
    push destination:478
    Dy js:528
    setTimeout handler*I js:201
    ky js:519
    Ac js:201
    <anonymous> js:736
    c js:729
    <anonymous> js:731
    <anonymous> js:731
    <anonymous> js:738
templates.js:129:65
    findOne templates.js:129
    _showElement templates.js:129
    show templates.js:129
    toggle templates.js:129
    r gtm.js:7
    <anonymous> line 660 > injectedScript:2
    a gtm.js:660
    b gtm.js:661
    of gtm.js:170
    e gtm.js:467
    Eb gtm.js:110
    ox gtm.js:468
    mx gtm.js:468
    tx gtm.js:468
    Cx gtm.js:473
    wy gtm.js:491
    zy gtm.js:495
    push gtm.js:499
    push js:369
    push destination:478
    ty gtm.js:490
    uI gtm.js:590
    e gtm.js:595
    f gtm.js:596
    q gtm.js:598
    (Async: setTimeout handler)
    I gtm.js:121
    q gtm.js:598
    <anonymous> gtm.js:599
    of gtm.js:170
    e gtm.js:467
    tx gtm.js:468
    Cx gtm.js:473
    wy gtm.js:491
    zy gtm.js:495
    push gtm.js:499
    push js:369
    push destination:478
    Dy js:528
    (Async: setTimeout handler)
    I js:201
    ky js:519
    (Async: EventListener.handleEvent)
    Ac js:201
    <anonymous> js:736
    c js:729
    <anonymous> js:731
    <anonymous> js:731
    <anonymous> js:738

The console errors on chrome, but you are still able to scroll and browse properly. I believe this is a FF specific issue - not sure if y'all verified the fix on that browser.

[iprzybysz]

We've tested it on both Linux and Windows systems, and it works on our devices. We've implemented a minor correction and we're going to see if it makes things even better