klipfolio.com - see bug description

[shad]

URL: https://klipfolio.com

Browser / Version: Firefox 57.0
Operating System: Mac OS X 10.11
Tested Another Browser: Yes

Problem type: Something else
Description: div scrolling also scrolls the page.
Steps to Reproduce:
In the new firefox browser, it appears that scrolling within a div also scrolls the outer page (not just inside the page)

https://cl.ly/1v1M1V050k1e

From webcompat.com with ❤️

[miketaylr]

@shad is there a public URL to test this out? Or does it require an account? Thanks.

[shad]

Looks like Klipfolio requires an account. I have attempted reproducing this with scrolling divs, but have been unable. Looking at the source of the page, it looks like they're doing something custom with the scrollbar.

[karlcow]

I have seen something like this in the past, but I can't find it anymore.
I wonder if there is any message in the console about JavaScript scrolling.
@shad does it still reproduce? And could you give instructions for people with an account on how to reproduce? Thanks.
@softvision-oana-arbuzov @softvision-sergiulogigan Maybe we could create an account and test.

[softvision-sergiulogigan]

Created a test account, and added some Klips.
Pinterest can be scrolled individually:

Tested on MacOS 10.13, Windows 10 and Nightly 61.
@shad is this still an issue on your side?

[shad]

Yup. Tho, honestly, I just moved back to Chrome for most of my activities, so this is not a serious issue for me.

To be clear, this is a "data table" where we're seeing this issue.

Mac OSX 10.13.4, Firefox Quantum 59.0.2 (64-bit)

[karlcow]

It looks like a JS scroll linked effect. Because I tried to create a reduced test case with only CSS and it's working without issues. This should be partly visible in the console.

@shad

1. if you are comfortable with the devtools be in Chrome or Firefox, could you tell us if the JS contains something related to DOM_DELTA_PIXEL
2. Are you using a trackpad or mouse wheel to scroll?

Thanks.

[shad]

I'm using the standard macbook pro trackpad. This message is in the console... This site appears to use a scroll-linked positioning effect. This may not work well with asynchronous panning; see https://developer.mozilla.org/docs/Mozilla/Performance/ScrollLinkedEffects for further details and to join the discussion on related tools and features!

…

On Thu, Apr 26, 2018 at 5:19 PM, Karl Dubost ***@***.***> wrote: It looks like a JS scroll linked effect. Because I tried to create a reduced test case with only CSS and it's working without issues. This should be partly visible in the console. @shad <https://github.com/shad> 1. if you are comfortable with the devtools be in Chrome or Firefox, could you tell us if the JS contains something related to DOM_DELTA_PIXEL 2. Are you using a trackpad or mouse wheel to scroll? Thanks. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#13575 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAAOAW7TEVa8PDRh5u73DwAIDbg5f78oks5tskfagaJpZM4QhRx4> .

-- *Shad Reynolds / *Principal Software Engineer [email protected] / (512) 294-5716 <5122945716> / @shadr <http://twitter.com/shadr> data.world [image: Twitter] <http://twitter.com/datadotworld> [image: Facebook] <http://facebook.com/datadotworld> [image: LinkedIn] <https://www.linkedin.com/company/7592908>

[karlcow]

Thanks @shad I let it open for now until we figure out how to investigate it.

[karlcow]

schroll-anchoring has been released recently.
@shad could you try with a recent version of nightly? Thanks.

[karlcow]

if the dashboard is shorter than the window the scrolling has no issue.

I added one more to have a scrolling context for the nesting element.

[karlcow]

The nesting context which is scrollable is:

<div id="c-main">

…

</div>

it has for style.

#c-main {
	flex: 1 1 auto;
	overflow-x: auto;
	overflow-y: scroll;
}

the tables themselves have an emulated scrollbar.

<div class="cx-scroll border-top-1 border-bottom-1">
  <div class="scrollbar" style="height: 192px;">
    <div class="track" style="height: 192px;">
      <div class="thumb" style="top: 51.4709px; height: 39.0095px;">
        <div class="end"></div>
      </div>
    </div>
  </div>
  <div class="viewport" style="height: 192px; overflow: hidden;">
    <table class="cx-table overview" style="width: 403px; top: -253.333px;">
      <thead style="display:none">
        <tr>
          <th></th>
          <th></th>
          <th></th>
          <th></th>
          <th></th>
          <th></th>
        </tr>
      </thead>

      <!-- cutting stuff -->
    </div>
  </div>
</div>

which is handled by https://app.klipfolio.com/js/jquery.tinyscrollbar.min.js?rv=1549480515.12

[karlcow]

And as a matter of fact sometimes the scrolling is not working in their example.
https://baijs.com/tinyscrollbar/

It's interesting because it scrolls and suddenly it stops on this demo page v.2.5.0
The klipfolio page doesn't say which version they are using.

The unresponsiveness is covered by this issue and this is something related to macOS+Firefox it seems. Could be an issue to dig by itself.

For klipfolio, Ah ok this was probably this issue which has been fixed. So maybe the site can adjust to the new version. Looking at https://app.klipfolio.com/js/jquery.tinyscrollbar.min.js?rv=1549480515.12 they seem to be using an older version.

Let's move this to needscontact.

[softvision-oana-arbuzov]

The issue is still reproducible.

Tested with:
Browser / Version: Firefox Nightly 71.0a1 (2019-10-30)
Operating System: MacOS 10.14.6

[softvision-oana-arbuzov]

The issue seems to be fixed. Scrolling works on he section without scrolling the entire page.

Tested with:
Browser / Version: Firefox Nightly 91.0a1 (2021-07-08)
Operating System: Windows 10 Pro

@shad can you still reproduce it?