Semantic-ui: [Modal] .scrolling.content’s scrollbar can’t be dragged in Firefox (55.0.3)

[ashkonBG]

In Scrolling Content Modal, the slider is not draggable to scroll but works fine with mouse wheel. If only you click and hold the slider then drag it to the middle of the screen, somehow you can scroll up and down. Still looking for the problem.

[awgv]

Hi @ashkonBG, I couldn’t reproduce. What version of Chrome were you using when you noticed that?

[ashkonBG]

Hey Andrew, there's no need to reproduce it just go to here, find the Scrolling Content press Run Code to launch the modal. Now if you drag the slider, it won't scroll unless dragged to the middle of screen.
Works fine with Chrome but not in Firefox (55.0.3).

[awgv]

@ashkonBG Custom scrollbars apply to Webkit-based browsers only, so they don’t affect Firefox. I’ve just tested 55.0.3, and it works as expected. What’s your OS?

[ashkonBG]

Windows 10

[ashkonBG]

@Banandrew i don't think this is a custom scrollbar, it's just a nested scroll. Maybe I am wrong, don't know.

[awgv]

@ashkonBG Could you please post the modal’s markup that you’re using, the one with scrolling content?

[ashkonBG]

Yes, the one says Scrolling Content with "New in 2.2.11" teal label in front of it.
Maybe I should make a video out of it!

[awgv]

@ashkonBG When I asked for the modal’s markup, I meant the HTML that you’re using.

[awgv]

@ashkonBG Nevermind, I understood what you said incorrectly.

[ashkonBG]

@Banandrew like I said there's no need to see what I am using or how to reproduce the scenario. Even the official example in here doesn't work.

[awgv]

@ashkonBG Yes, sorry, it’s been a busy day, and my mind seems to be shutting off. In any case, I can’t see it on a very similar setup (also Windows 10), and we can’t fix it without some way of debugging it. Please record a video of it, and I’ll leave the issue opened in case there will be people that can confirm it.

The documentation has custom scrollbars enabled by default, so the last thing I can suggest for you to try is to disable them locally: put @useCustomScrollbars: false; in installation_folder/src/site/globals/site.variables and rebuild the framework. I don’t think it will work, because it doesn’t make much sense, but it’s worth a try.

[ashkonBG]

Let me record a video or something just to be clear of what I mean. If you don't face the same thing, there's probably something wrong with my machine, since we both have similar setup.

[ashucg]

@Banandrew I am also having the same issue. It seems to work fine if I use mousewheel to do the scrolling but it doesn't work if I try to drag the scrollbar. And just like @ashkonBG said, even the official modal example is not working.

I am on Windows 10 using FF Developer Edition 56.0b9 (64-bit)

[ashucg]

@Banandrew should I create a new issue as you are not responding on this one?

[awgv]

Hi @ashucg, no. I’m not responding, because there is nothing for me to say.

[ashucg]

@Banandrew were you able to reproduce this issue or what? The only label is "Cannot Reproduce" right now, so if you were not able to reproduce the issue I can post a screencast for you to take a look.

[awgv]

@ashucg We can’t fix what we can’t reproduce, so if you guys have time to investigate it, please do.

[ashucg]

@Banandrew I will try to investigate this issue as of now I have noticed that this issues occurs on FF when screen width >= 800

[ashucg]

@ashkonBG @Banandrew Removing perspective: 2000px; for .ui.page.dimmer fixed this issue for me.
@ashkonBG It would be great if you could confirm this as @Banandrew is unable to reproduce this issue.

[ashkonBG]

@ashucg, you are right. Removing perspective from .ui.dimmer.modals does make it draggable.
@Banandrew it definitely got something to do with the media queries, since we all have same setup and you can't reproduce it. Try it with another device with different screen size, you'll see the problem.

[linjingming]

I am also having the same issue.

[ashucg]

@linjingming I have removed the perspective rule to fix this issue, I would recommend you to do the same.

BTW, I haven't faced this issue since I have updated to FF 57 but I still recommend you to remove the perspective rule for the sake of previous versions

[srissel]

In our team, we are experiencing the issue with:

• Windows 10
• Firefox 58

Is there any progress in this issue?

We'd like to provide our customers a fix from from Semantic UI core itself, without the need to write some override CSS...

[ashucg]

@srissel It is working fine on Firefox 58.0.1x64 and Firefox 59.0b5x64 (Dev. Edition) on Linux and on Windows 10 (tested using Virtual Box), but if you are facing this issue, you can still use the fix that has been mentioned above.

I don't think any changes have been made to the semantic core regarding this issue because this is related to only Firefox (browser specific) and has been already fixed in latest Firefox versions (working fine for me since Firefox 57).

[srissel]

@ashucg , thanks for your reply.
All of my colleagues and me (5 persons in total) are able to reproduce this issue on your own Semantic UI modal page: https://semantic-ui.com/modules/modal.html#scrolling-content

We all use most recent Firefox 58.0.1 64bit on Windows 10.

A fix from Semantic UI is highly appreciated, otherwise we'd have to incorporate this fix manually a vast number of our customer themes via overrides.

[ashucg]

@srissel, sorry but I am just a guy who has faced this issue in past. I have create a pull request (#6132) though (added it to the master branch first, my bad, check the next branch.)

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 30 days if no further activity occurs. Thank you for your contributions.