1287147 - Scrollbar thumb doesn't follow mouse on https://vk.com

Status: RESOLVED WORKSFORME

(Web Compatibility :: Site Reports, defect)

Description

[Benoit Girard (:BenWa)]

Follow the steps in bug 1287066:
https://bugzilla.mozilla.org/show_bug.cgi?id=1287066#c0

> 1. Download and extract attached "testcase 1" in a folder with a short full
> name
> 2. Open "2016.04.20 00-40-17 Реклама ВКонтакте.htm" in Firefox
> 3. Hover mouse over the blue scrollbar (selector
> ".wcommunity_scrollbar_inner")
> 4. Hold left mouse button
> 5. Slowly move mouse down by ~100px without releasing left mouse button

but set layout.css.devPixelsPerPx to 2

When scrolling the scrollbar thumb wont follow the mouse, the thumb will instead move half as slow.

Comment 1

[Benoit Girard (:BenWa)]

Attachment: bugzilla.gif

Comment 2

[Botond Ballo [:botond]]

This happens with APZ disabled, too.

Note that the scrollbar in question is not a real scrollbar, but a div styled to look like a scrollbar with accompanying JS code to scroll the associated content in response to mouse events (i.e., a "fake scrollbar"). The issue is therefore likely to be that the JS implementing the fake scrollbar does not take into account the device scale.

Comment 3

[Botond Ballo [:botond]]

(In reply to Botond Ballo [:botond] from comment #2)
> The issue is therefore likely to be that the JS implementing the fake
> scrollbar does not take into account the device scale.

Specifically, the code is using the difference between the screenY of the mousedown event that started the scrollbar drag, and then screnY of the mousemove event during the drag, to calculate the amount by which to scroll the scrolled content (and the scroll thumb's position is turn derived from that). MouseEvent.screen[X|Y] is independent of the full-zoom, so that difference needs to be divided by window.devicePixelRatio to yield a quantity in CSS pixels.

The relevant code in widget_community_data/al_community.js, in Scrollbar._mousemove().

Moving to Tech Evangelism.

Comment 4

[arni2033]

I can also reproduce this with zoom level set to 150%. I remember that the last time I reported a bug on that site, tech support said that zoom levels different from 100% are not supported.
Next time I'll ask them what they think about DPI, which is actually the same (i.e. "cheating")

Actually, now they don't use scrollbar on that page (https://vk.com/ads), but the same code is used in many other places, e.g. music and emoji sections.

Comment 5

[Karl Dubost💡 :karlcow]

Setting layout.css.devPixelsPerPx;1.5
Going to https://vk.com/ads

This is the structure of the html page which contains scrollable text.

```html
<div id="page_wrap">
    <style type="text/css">
    .wcommunity_avatar {
        width: 0px;
        height: 0px;
        margin-right: 0px;
    }
    
    .wcommunity_row {
        margin-top: 0px;
    }
    </style>
    <div id="autosize_helpers" style="position: absolute; margin-left: -10000px; margin-left: -10000px"></div>

    <div id="main" class="wcommunity_wrap  wcommunity_no_head">
        <div style="width: 295px;height: 306px;">
            <div class="wcommunity_wall ui_scroll_container ui_scroll_default_theme ui_scroll_wcommunity_theme ui_scroll_hidden" id="community_content" style="overflow: hidden; height: 306px; width: 321px;">
                <div class="ui_scroll_overflow">
                    <div class="ui_scroll_blocker">
                        <div class="ui_scroll_outer" style="margin: 500px 0px;">
                            <div class="ui_scroll_inner">
                                <div class="ui_scroll_content">
                                    <div id="page_wall_posts" class="wcommunity_wall_posts wall_module">
                                        <div class="wcommunity_post">
                                            <!-- … -->
                                        </div>
                                        <div class="wcommunity_post">
                                            <!-- … -->
                                        </div>
                                        <div class="wcommunity_post">
                                            <!-- … -->
                                        </div>

                                    </div>

                                </div>
                                <div class="ui_scroll_resize_sensor">
                                    <div class="ui_scroll_resize_sensor ui_scroll_resize_expand">
                                        <div style="width: 331px; height: 6803px;"></div>
                                    </div>
                                    <div class="ui_scroll_resize_sensor ui_scroll_resize_shrink">
                                        <div></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="ui_scroll_resize_sensor">
                        <div class="ui_scroll_resize_sensor ui_scroll_resize_expand">
                            <div style="width: 331px; height: 316px;"></div>
                        </div>
                        <div class="ui_scroll_resize_sensor ui_scroll_resize_shrink">
                            <div></div>
                        </div>
                    </div>
                </div>
                <div class="ui_scroll_bar_container">
                    <div class="ui_scroll_bar_outer">
                        <div class="ui_scroll_bar_inner" style="height: 30px; transform: translateY(0px);"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
```

It's working without issue.

Trying on https://vk.com/music
https://vk.com/live
https://vk.com/emojis
I don't have issue either. No visible scrollbar. Scrolling is smooth.

Was it fixed? Closing as worksforme. Reopen if I missed something.
Testing on a mac.