Modal mouse wheel issues in Chrome on Windows/Linux #16297

NerdGGuy · 2015-04-15T13:49:31Z

A modal is loaded on window.onload with the windows height smaller then the modal content. Scroll bar exists but mouse wheel doesn't scroll when using Chromium Version 41.0.2272.76 Ubuntu 14.04 (64-bit). Also confirmed this issue exists on Chrome Version 42.0.2311.90 Windows. Mouse wheel seems to work in Firefox.

http://bl.ocks.org/NerdGGuy/raw/8531bc767704e148c55f/

Re-sizing the window restores mouse wheel functionality. Also weirdly if a close button exists on the modal (not in this case sorry) mousedown on the button then mouseup away from button also restores mouse wheel functionality.

sqal · 2015-04-15T15:06:15Z

Works just fine on latest version of Firefox/Internet Explorer. It seems like this problem affects Chrome and Opera (28.0 - doesn't work either) and only if we open the modal with fade effect

// Edit:

Adding the following code fixes the issue for me:

.modal.fade.in {
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}

cvrebert · 2015-04-15T17:50:03Z

Reposting the underlying Gist to trigger LMVTFY: https://gist.github.com/NerdGGuy/8531bc767704e148c55f/

twbs-lmvtfy · 2015-04-15T17:50:05Z

Hi @cvrebert!

You appear to have posted a live example (https://gist.github.com/NerdGGuy/8531bc767704e148c55f), which is always a good first step. However, according to the HTML5 validator, your example has some validation errors, which might potentially be causing your issue:

line 1, column 1 thru line 1, column 6: Start tag seen without seeing a doctype first. Expected <!DOCTYPE html>.

You'll need to fix these errors and post a revised example before we can proceed further.
Thanks!

(Please note that this is a fully automated comment.)

cvrebert · 2015-04-15T17:55:53Z

JS Bin of your example, with the missing DOCTYPE added:
http://jsbin.com/nosuyi/2/edit

cvrebert · 2015-04-15T18:04:55Z

I am unable to reproduce on OS X Chrome 42.

sqal · 2015-04-15T18:35:39Z

@cvrebert Did you check this locally? Download your jsbin example and try it then, because I cant't reproduce this bug on jsfiddle/jsbin etc. sites.

NerdGGuy · 2015-04-15T21:37:43Z

@cvrebert Sorry I should have mentioned I couldn't reproduce this bug on jsfiddle/jsbin which is why I used bl.ocks.org.

@sqal Thanks, I didn't think to check the fade effect.

// EDIT: Added DOCTYPE to gist/blocks just coz.

cvrebert · 2015-04-15T23:20:10Z

Still can't repro on OS X Chrome with the updated bl.ocks example. Maybe the bug is OS-specific.

cvrebert · 2015-04-15T23:32:15Z

Seems reproducible in Win 8.1 Chrome 42.0.2311.82 on Sauce Labs.

cvrebert · 2015-04-16T04:53:22Z

Interestingly, I couldn't reproduce this in Linux Chrome 42.0.2311.22 on Sauce Labs.

6 · 2015-04-22T04:23:48Z

I could reproduce this on OS X Chrome 41.0.2272.76 using Sauce Labs with the above bl.ocks URL.

This appears to be a related Chrome bug:
https://code.google.com/p/chromium/issues/detail?id=343244

Per @sqal's suggestion, adding either transform: translateZ(0) or transform: translate3d(0,0,0) to .modal.fade.in fixes it on OS X (41.0.2272.76) & Windows 8.1 (41.0.2272.89) on Sauce Labs.

Example fix:
http://bl.ocks.org/6/raw/d9357b1432f2d5dc63a8/

cvrebert · 2015-04-22T06:23:50Z

I guess the translateZ hack could be an option if we're okay with not supporting Safari<7.1 (on account of #14254), which would comply with our browser support policy.

cvrebert · 2015-06-23T20:24:25Z

Given the browser bugs we've seen associated with translateZ in the past, I think we're reluctant to try adding it to modals again (albeit in a different place).
@mdo WDYT? CantFix/WontFix?

mdo · 2015-06-23T20:27:06Z

Won't fix.

cvrebert · 2015-06-23T20:28:34Z

Cool, I'll file another Chrome bug for good measure.

benwo · 2015-10-05T10:12:39Z

Hey @cvrebert, any follow up? Am still having this issue.

cvrebert · 2015-12-07T10:17:09Z

Sorry, didn't get around to filing that Chrome bug. Reopening to keep it on my TODO list.

cvrebert · 2016-01-19T06:15:50Z

I can no longer reproduce this with Chrome 47 on Win 10, Win 8.1, or Linux, on Sauce Labs, using the original bl.ocks example.

cscuser · 2021-05-06T11:55:08Z

Works just fine on latest version of Firefox/Internet Explorer. It seems like this problem affects Chrome and Opera (28.0 - doesn't work either) and only if we open the modal with fade effect

// Edit:

Adding the following code fixes the issue for me:
.modal.fade.in {
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}

woow its working..

cvrebert mentioned this issue Apr 15, 2015

Add support for bl.ocks.org cvrebert/lmvtfy#92

Closed

cvrebert added the confirmed label Apr 15, 2015

cvrebert changed the title ~~Modal mouse wheel issues on Chrome~~ Modal mouse wheel issues in Chrome on Windows/Linux Apr 15, 2015

cvrebert added the browser-bug label Apr 22, 2015

6 added a commit to 6/bootstrap that referenced this issue Apr 22, 2015

Fix twbs#16297 - modal mousewheel scrolling issue on Chrome

69464cf

6 mentioned this issue Apr 22, 2015

Fix #16297 - modal mousewheel scrolling issue on Chrome #16332

Closed

6 added a commit to 6/bootstrap that referenced this issue May 3, 2015

Fix twbs#16297 - modal mousewheel scrolling issue on Chrome

0a847d1

jeromelachaud mentioned this issue May 22, 2015

scroll in project page jeromelachaud/freelancer-theme#19

Closed

cvrebert added this to the v3.3.6 milestone Jun 23, 2015

cvrebert closed this as completed Jun 23, 2015

cvrebert removed this from the v3.3.6 milestone Nov 11, 2015

cvrebert added the v3 label Nov 11, 2015

cvrebert reopened this Dec 7, 2015

cvrebert self-assigned this Dec 7, 2015

cvrebert removed their assignment Jan 19, 2016

cvrebert closed this as completed Jan 19, 2016

helloimela mentioned this issue Nov 15, 2018

Scrollwheel on mouse is not working on modal box scania/corporate-ui#366

Closed

eihabi mentioned this issue Aug 28, 2020

Modal Scrollbar Disappears in Chrome 85.0.4183.83 robinparisi/tingle#141

Closed

twbs locked as resolved and limited conversation to collaborators May 6, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Modal mouse wheel issues in Chrome on Windows/Linux #16297

Modal mouse wheel issues in Chrome on Windows/Linux #16297

NerdGGuy commented Apr 15, 2015

sqal commented Apr 15, 2015

cvrebert commented Apr 15, 2015

twbs-lmvtfy commented Apr 15, 2015

cvrebert commented Apr 15, 2015

cvrebert commented Apr 15, 2015

sqal commented Apr 15, 2015

NerdGGuy commented Apr 15, 2015

cvrebert commented Apr 15, 2015

cvrebert commented Apr 15, 2015

cvrebert commented Apr 16, 2015

6 commented Apr 22, 2015

cvrebert commented Apr 22, 2015

cvrebert commented Jun 23, 2015

mdo commented Jun 23, 2015

cvrebert commented Jun 23, 2015

benwo commented Oct 5, 2015

cvrebert commented Dec 7, 2015

cvrebert commented Jan 19, 2016

cscuser commented May 6, 2021

Modal mouse wheel issues in Chrome on Windows/Linux #16297

Modal mouse wheel issues in Chrome on Windows/Linux #16297

Comments

NerdGGuy commented Apr 15, 2015

sqal commented Apr 15, 2015

cvrebert commented Apr 15, 2015

twbs-lmvtfy commented Apr 15, 2015

cvrebert commented Apr 15, 2015

cvrebert commented Apr 15, 2015

sqal commented Apr 15, 2015

NerdGGuy commented Apr 15, 2015

cvrebert commented Apr 15, 2015

cvrebert commented Apr 15, 2015

cvrebert commented Apr 16, 2015

6 commented Apr 22, 2015

cvrebert commented Apr 22, 2015

cvrebert commented Jun 23, 2015

mdo commented Jun 23, 2015

cvrebert commented Jun 23, 2015

benwo commented Oct 5, 2015

cvrebert commented Dec 7, 2015

cvrebert commented Jan 19, 2016

cscuser commented May 6, 2021