Dragging the scroll bar to scroll does not work. #139

spivurno · 2020-04-18T03:56:22Z

Summary

Clicking and dragging the scrollbar to scroll through a modal that is taller than the viewport does not work. Interestingly, scrolling via a scroll wheel or trackpad does work.

Steps to Recreate

Open https://tingle.robinparisi.com/
Click the "Big Content? No problem!" demo button.
Ensure that your browser window is smaller than the modal so that scrolling is required.
Attempt to click and drag the scrollbar. The result differs depending on OS and browser. Here are the results from my testing.

Mac | Firefox: Clicking the scrollbar closes the modal.
Mac | Chrome: Clicking the scrollbar closes the modal.
Mac | Safari: Clicking the scrollbar closes the modal.

The following were tested with BrowserStack:

Eager to be helpful. I'd be happy to commission or provide some additional sponsorship for your attention to this issue. I really appreciate your time!

emmanuelballery · 2020-04-19T15:21:43Z

Hello,

The rule .tingle-modal:before used to add a backdrop filter blur is in a fixed position and is rendered in front of the scrollbar ;

tingle/src/tingle.css

Lines 248 to 262 in 4e4237a

 @supports (backdrop-filter: blur(12px)) { 

 .tingle-modal:before { 

 position: fixed; 

 top: 0; 

 right: 0; 

 bottom: 0; 

 left: 0; 

 content: ""; 

 backdrop-filter: blur(18px); 

 } 

 .tingle-enabled .tingle-content-wrapper { 

 filter: none; 

 } 

 }

This is only the case when backdrop-filter is supported hence the strange browsers behaviors.

I think you can use an absolute positioning instead of a fixed one to avoid this bug (as its parent is already fixed) :

@supports (backdrop-filter: blur(12px)) {
  .tingle-modal:before {
    position: absolute;
  }
}

spivurno · 2020-04-20T20:36:18Z

Hi @emmanuelballery, thank you! This solves the issue in both Windows Chrome and Windows Edge.

Do you have any insights into how this might be addressed in the Mac browsers? I tried your fix there without success. I tried disabling the ::before backdrop completely. Still no love. I suspect the issue may have to do with the click event being picked up by Tingle.

emmanuelballery · 2020-04-21T08:29:07Z

Hello,

This is the list of browsers I worked with :

[no bug] do not support backdrop-filter :
- Linux > Chrome 73.0.3683.86
- Linux > Firefox 75.0
- Windows (VM) > Firefox 75.0
- Windows (VM) > IE 11.615.17763.0
- Mac (VM) > Firefox 75.0
[bug] support backdrop-filter, scrollbar is not accessible :
- Windows (VM) > Chrome 81.0.4044.113
- Windows (VM) > Edge 44.17763.1.0
- Windows (VM) > Opera 67.0.3575.137
- Mac (VM) > Chrome 81.0.4044.113
- Mac (VM) > Safari 11.0

Applying absolute positioning instead of a fixed one to .tingle-modal:before is not a solution (sorry), it will limit the size of the backdrop ; when scrolling it's noticible ; display: none; is the solution for now ;

In Safari the scrollbar is not rendering, even when preference is set to always :

I tried to hack the scrollbar using this StackOverflow answer : https://stackoverflow.com/a/7855592

.tingle-modal::-webkit-scrollbar {
  -webkit-appearance: none;
}
.tingle-modal::-webkit-scrollbar:vertical {
  width: 10px;
}
.tingle-modal::-webkit-scrollbar-thumb {
  border: 2px solid white;
  background-color: black;
}
.tingle-modal::-webkit-scrollbar-track {
  background-color: #ffffff;
}

It works. It is usable. But, what a hack ...

I don't think I can do more. A new DOM node to handle this blur backdrop would probably be the best solution.

robinparisi · 2020-04-24T23:51:52Z

It's a tricky one...

We should be able to calculate scrollbar width then adapt event listener to handle click on scrollbar by using this:

var scrollbarWidth = this.modal.offsetWidth - this.modal.clientWidth

But on MacOS, depending on the setting shown by @emmanuelballery, the browser won't return the correct size when the scrollbar is set to "When scrolling" or when using Safari.

We could use this data as a workaround but I find it a bit hacky:

https://codepen.io/sambible/post/browser-scrollbar-widths

To be honest, I don't understand why scrollbar trigger click event. It should be a different DOM elem or trigger a different event...

Edit: another ressource

https://gist.github.com/martynchamberlin/6aaf8a45b36907e9f1e21a28889f6b0a

emmanuelballery · 2020-04-27T13:56:59Z

Hi @robinparisi,

The real problem is this rule .tingle-modal:before which displays an invisible block in front of the scrollbar (a fixed block in a fixed block). The click event is not triggered by the scrollbar, but by the :before rendered in front of it. Hiding/removing this :before fixes everything;

This issue started here 21e333c.

The blur effect is fine when using the tingle-content-wrapper class as written in the doc:

Important: For the blur effect, you need to wrap your content inside a container with the "tingle-content-wrapper" class.

emmanuelballery · 2020-04-27T14:08:25Z

A solution could be to add a parent to .tingle-modal with this blur effet. Something like:

.tingle-modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  backdrop-filter: blur(18px);
  & > .tingle-modal {
    position: relative;
    height: 100%;
    overflow-y: auto;
    // remove top, right, bottom, left, z-index rules
  }
}

robinparisi · 2020-04-28T03:12:51Z

@emmanuelballery Maybe I'm missing something but I think we're talking about two different problems.

With the following setting:

with pseudo-element:
- ❌ Firefox: click on the scrollbar trigger event and close modal
- ❌ Chrome: click on the scrollbar trigger event and close modal
without pseudo-element (by completely removing the code):
- ❌ Firefox: click on the scrollbar still trigger event and close modal
- ❌ Crome: click on the scrollbar still trigger event and close modal

So even without the pseudo element, scrollbar trigger an event but it shouldn't. In fact, this seems logic because in theory, pseudo-element aren't part of the DOM and we can't attach events to them.

With this setting instead:

with pseudo-element:
- ✅ Firefox: click on the scrollbar works
- ⚠️ Chrome: can't use scrollbar because of the pseudo-element but we can use pointer-event: none to fix this easely
without pseudo-element:
- ✅ Firefox: click on the scrollbar works
- ✅ Crome: click on the scrollbar works

macOS version: 10.14.6

robinparisi · 2020-04-28T04:24:32Z

If I resume, we have 3 bugs:

scrollbar shouldn't trigger close event on OSX (depending on macOS version, browser and scroll settings)
when working as expected, pseudo-element :before souldn't prevent scroll (easy fix with pointer-event: none)
on Safari, when scrollbar is set to "Always" in general settings, the scrollbar on tingle-modal div doesn't even appears (I try your custom CSS @emmanuelballery but it doesn't work for me)

emmanuelballery · 2020-04-28T07:22:28Z

Man, I always forget about pointer-events! My custom CSS was just a mockup, not an actual implementation, sorry 🤦

I think there are only 2 bugs. One you just fixed with pointer-events: none;. The other one being Safari not wanting to show the scrollbar at all (but is it really tingle's problem ...).

# nothing wrong, do not support "backdrop-filter"
# Linux > Chrome 73.0.3683.86
# Linux > Firefox 75.0
# Windows (VM) > Firefox 75.0
# Windows (VM) > IE 11.615.17763.0
# Mac (VM) > Firefox 75.0

+ support "backdrop-filter" but fixed with "pointer-events: none"
+ Windows (VM) > Chrome 81.0.4044.113
+ Windows (VM) > Opera 67.0.3575.137
+ Mac (VM) > Chrome 81.0.4044.113

! support "backdrop-filter" but the scrollbar is blurry even with "pointer-events: none"
! Windows (VM) > Edge 44.17763.1.0

- no scrollbar at all, even with general settings set to "always show"
- Mac (VM) > Safari 11.0

robinparisi · 2020-04-28T12:52:26Z

If I assume the following:

clone master branch
add pointer-events: none; to .tingle-modal:before in tingle.css
serve demo with gulp watch
macOS version: 10.14.6
macOS : Settings > General > Show scrollbar > "When scrolling" (important)
Firefox 75.0 or Chrome 81.0
open "Big content ?" example

I use trackpad and start scrolling, scrollbar then appears, I try to click on scrollbar to scroll by dragging it -> trigger event and close the modal

If @spivurno can confirm because the only diff I see with @emmanuelballery is that I use a native version and not a VM (and maybe our OS version are not the same, the auto scrollbar is typically an OS dependent behavior).

spivurno · 2020-04-29T10:59:38Z

I can confirm that the pointer-events: none; solution fixes the issue where the scrollbar was not clickable in all of the Windows browsers.

With the same fix in place, I am still seeing the issue on Mac browsers. Starting to scroll reveals the scrollbar and then clicking the scrollbar closes the modal (rather than allowing you to drag it).

If you update the macOS Show scrollbar setting to "Always", the point-events: none; solution does resolve the issue on Mac browsers as well (except the noted issue about Safari which does not show the scrollbar at all).

robinparisi · 2020-04-29T14:15:18Z

Ok for me this is a problem on how macOS inject the automatic scrollbar into the DOM. I have some ideas on how to try to correct this but it is not ideal since we can't detect properly scrollbar mode, usage mode (touch, mouse, trackpad) and browser.

I will think a little more and I will implement what seems the less "hacky".

robinparisi · 2020-04-30T17:50:35Z

It should be good with the lastest release (v0.15.3)

emmanuelballery · 2020-04-30T19:10:33Z

Seems like you had a great night! Thanks!

spivurno · 2020-05-02T12:23:39Z

@robinparisi Thank you so much! Implemented and tested. Works great! Sent you a few coffees via Ko-fi.

@emmanuelballery I'd love to buy you a cup a coffee. Any method for doing so?

emmanuelballery · 2020-05-02T13:27:37Z

That's really nice of you @spivurno. Just reward @robinparisi! He was the one who did all the work. I also had an interest in fixing this issue for my clients!

robinparisi added bug help wanted labels Apr 24, 2020

robinparisi closed this as completed in fc389c4 Apr 30, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Dragging the scroll bar to scroll does not work. #139

Dragging the scroll bar to scroll does not work. #139

spivurno commented Apr 18, 2020

emmanuelballery commented Apr 19, 2020

spivurno commented Apr 20, 2020

emmanuelballery commented Apr 21, 2020

robinparisi commented Apr 24, 2020 •

edited

Loading

emmanuelballery commented Apr 27, 2020

emmanuelballery commented Apr 27, 2020

robinparisi commented Apr 28, 2020 •

edited

Loading

robinparisi commented Apr 28, 2020 •

edited

Loading

emmanuelballery commented Apr 28, 2020

robinparisi commented Apr 28, 2020 •

edited

Loading

spivurno commented Apr 29, 2020

robinparisi commented Apr 29, 2020

robinparisi commented Apr 30, 2020

emmanuelballery commented Apr 30, 2020

spivurno commented May 2, 2020

emmanuelballery commented May 2, 2020

Dragging the scroll bar to scroll does not work. #139

Dragging the scroll bar to scroll does not work. #139

Comments

spivurno commented Apr 18, 2020

Summary

Steps to Recreate

emmanuelballery commented Apr 19, 2020

spivurno commented Apr 20, 2020

emmanuelballery commented Apr 21, 2020

robinparisi commented Apr 24, 2020 • edited Loading

emmanuelballery commented Apr 27, 2020

emmanuelballery commented Apr 27, 2020

robinparisi commented Apr 28, 2020 • edited Loading

robinparisi commented Apr 28, 2020 • edited Loading

emmanuelballery commented Apr 28, 2020

robinparisi commented Apr 28, 2020 • edited Loading

spivurno commented Apr 29, 2020

robinparisi commented Apr 29, 2020

robinparisi commented Apr 30, 2020

emmanuelballery commented Apr 30, 2020

spivurno commented May 2, 2020

emmanuelballery commented May 2, 2020

robinparisi commented Apr 24, 2020 •

edited

Loading

robinparisi commented Apr 28, 2020 •

edited

Loading

robinparisi commented Apr 28, 2020 •

edited

Loading

robinparisi commented Apr 28, 2020 •

edited

Loading