Bootstrap: Modal mouse wheel issues in Chrome on Windows/Linux

Created on 15 Apr 2015 · 18Comments · Source: twbs/bootstrap

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.

browser bug confirmed v3

Source

NerdGGuy

Most helpful comment

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);
}

sqal on 15 Apr 2015

👍3 🎉2

All 18 comments

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);
}

sqal on 15 Apr 2015

👍3 🎉2

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

cvrebert on 15 Apr 2015

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._)

twbs-lmvtfy on 15 Apr 2015

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

cvrebert on 15 Apr 2015

I am unable to reproduce on OS X Chrome 42.

cvrebert on 15 Apr 2015

@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.

sqal on 15 Apr 2015

@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.

NerdGGuy on 15 Apr 2015

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

cvrebert on 16 Apr 2015

Seems reproducible in Win 8.1 Chrome 42.0.2311.82 on Sauce Labs.

cvrebert on 16 Apr 2015

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

cvrebert on 16 Apr 2015

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/

6 on 22 Apr 2015

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 on 22 Apr 2015

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?

cvrebert on 23 Jun 2015

Won't fix.