rsf.org - see bug description

[karlcow]

URL: https://rsf.org/fr/france

Browser / Version: Firefox 58.0
Operating System: Mac OS X 10.13
Tested Another Browser: Yes

Problem type: Something else
Description: When scrolling with the trackpad over the text the full page is moving too
Steps to Reproduce:

1. Go to https://rsf.org/fr/france with Firefox 58.0a1 (2017-10-08) (64-bit)
2. Scroll the page so the area with the long description is visible.
3. Put your cursor over this area.
4. Try to scroll with the trackpad.

Expected: The text area is scrolling until the end of the text, then the full page
is moving (like in Safari)

Actual: The text area is slightly moving at the same time than the full page. Control is difficult.

Also tested in Safari Version 11.0 (13604.1.38.1.6) and with Opera 49 (Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/62.0.3202.29 Safari/537.36 OPR/49.0.2725.12 (Edition beta))

layout.css.servo.enabled: true

From webcompat.com with ❤️

[karlcow]

The html markup is

<div class="slimScrollDiv" style="position: relative; overflow: hidden; width: auto; height: 350px;">
    <div class="white-b__text" style="overflow: hidden; width: auto; height: 350px;">
        <h3 class="font-24 white-b__overview-title bold">
            <div class="field field-name-field-rsf-subtitle field-type-text-long field-label-hidden">
                <div class="field-items">
                    <div class="field-item even">Une presse libre mais la concentration inquiète</div>
                </div>
            </div>
        </h3>
        <span class="font-18 content-page__body">
            <div class="field field-name-description-field field-type-text-with-summary field-label-hidden">
                <div class="field-items">
                    <div class="field-item even">
                        <p>Si la presse … à l’égard des journalistes. </p>
                    </div>
                </div>
            </div>
        </span>
    </div>
    <div class="slimScrollBar" style="background: rgb(226, 226, 226) none repeat scroll 0% 0%; width: 7px; position: absolute; top: 60px; opacity: 0.4; display: none; border-radius: 7px; z-index: 99; right: 1px; height: 172.293px;"></div>
    <div class="slimScrollRail" style="width: 7px; height: 100%; position: absolute; top: 0px; display: none; border-radius: 7px; background: rgb(51, 51, 51) none repeat scroll 0% 0%; opacity: 0.2; z-index: 90; right: 1px;"></div>
</div>

with the css

element {
	position: relative;
	overflow: hidden;
	width: auto;
	height: 350px;
}
element {
	overflow: hidden;
	width: auto;
	height: 350px;
}

There are events set on `div.white-b__text` to handle the scroll.

This is using

/*! Copyright (c) 2011 Piotr Rochala (http://rocha.la)
 * Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php)
 * and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses.
 *
 * Version: 1.3.6
 *
 */

It is maintained at https://github.com/rochal/jQuery-slimScroll

And these old issues look very close

• mousewheel propagtion in Firefox rochal/jQuery-slimScroll#175
• Firefox+Windows: Slimscroll scrolls whole page rochal/jQuery-slimScroll#289

That said the project seems to be completely unmaintained.

[softvision-sergiulogigan]

The text area is slightly moving at the same time than the full page.

The issue is still present.

Tested on Mac OS 10.13, with Nightly 61.

[karlcow]

Yes so I checked again the library. I even modified

          window.addEventListener ? (this.addEventListener('DOMMouseScroll', v, !1), this.addEventListener('mousewheel', v, !1), this.addEventListener('MozMousePixelScroll', v, !1))  : document.attachEvent('onmousewheel', v)o 

But then it scrolls a bit too fast.

I think we should switch to needscontact. The library is not maintained. Nothing has happened there.
and the scrolling solution is slightly broken.

[adamopenweb]

Reaching out by site contact form:
https://rsf.org/en/contact

[cipriansv]

I retested the issue and it is still reproducible on my side.

Tested with:
Browser / Version: Firefox Nightly 70.0a1 (2019-08-11)
Operating System: macOS Mojave 10.14.5

[karlcow]

It's broken in Safari in a different way now.

and in chrome

Let's close it as non-compat.

[karlcow]

I sent them a tweet
https://twitter.com/webcompat/status/1188984546135437314