Mouse wheel scroll does not always work in Materialize dropdown when using Chrome materialize v1.0.0

[frostless]

After upgrading from v0.100.2 to v1.0.0, the mouse scroll only work intermittently in Chrome. Other browsers work fine.

Specifically, if you mouse wheel scroll with the mouse cursor on the top -left area of the dropdown, it will work. But if you mouse wheel scroll with the cursor elsewhere, it will not work.

Another observation is if you click one dropdown before clicking and mouse wheel scrolling another dropdown, it will work, so presumably it has something to do with the dropdown close event.

https://codepen.io/frostless/pen/bQPLqK (not always work v1.0.0) https://codepen.io/frostless/pen/aKQEXO (always work v0.100.2)

[ArmenPoghosyan]

Any solution found?

[frostless]

Any solution found?

No, you also have this problem I assume?

[ArmenPoghosyan]

Any solution found?

No, you also have this problem I assume?

Yes, I have the same issue and now I'm looking for some solution regarding.

[frostless]

Any solution found?

No, you also have this problem I assume?

Yes, I have the same issue and now I'm looking for some solution regarding.

If you resize the window the scroll will work, I guess the resizing event would clear up some constraints?

[ArmenPoghosyan]

Any solution found?

No, you also have this problem I assume?

Yes, I have the same issue and now I'm looking for some solution regarding.

If you resize the window the scroll will work, I guess the resizing event would clear up some constraints?

Yeah, the resize fixed the issue. But it's not a permanent fix. Will investigate the source of MaterializeCSS for some useful information.

[frostless]

Any solution found?

No, you also have this problem I assume?

Yes, I have the same issue and now I'm looking for some solution regarding.

If you resize the window the scroll will work, I guess the resizing event would clear up some constraints?

Yeah, the resize fixed the issue. But it's not a permanent fix. Will investigate the source of MaterializeCSS for some useful information.

Do not think it is CSS related, I tried using Materialize 1.0.0 JS and 0.100 CSS but the problem still persisted. I think it has something to do with the JS code.

[frostless]

Found a temporary solution: It seems like if a select element with class "browser-default" is in the document when the init method is called, the bug would be gone. So we can append a out-of-document-flow, hidden select element to the body like this:

$(document).ready(function () {
    $('body').append('<select class="browser-default" style="position:absolute;visibility:hidden"></select>'); //this is the hack
    M.AutoInit();
})

I know this is not a ultimate solution, but it seems to temporarily fix the bug. A better solution would need to be done at the low-level of Materialize source code.

[robrechta]

I'm working with vue, and have no jquery availble. So I tried to add the select (with class="browser-default") to the body in the 'mounted' step, but it didn't changed anything. At first I thought it worked, but after reloading the page, the dropdown is still not scrollable with the mouse scroll wheel as described above.

[frostless]

In my case the problem is fixed even the page gets reloaded. You do not need to use jquery to add element , maybe try putting the <select class="browser-default" style="position:absolute;visibility: hidden"></select> in the html? It is a hidden, out-of-document flow element anyway. I never worked with Vue but I am familiar with React which I believe is similar with Vue. Or add it along with M.Autoinit

[robrechta]

@frostless I've tried different solutions, but I see no changes...

• I've added the select element in the html-body, and did an M.Autoinit in the mounted step, in the updated step, ... all no effect
• I've added the select in the beginning of the body, in the end of the body.... (no luck here)
• I've added the select element with document.createElement function, together with the M.Autoinit,... also no effect

The one thing that I did notice, I have the dropdown in a form with multiple fields. When I click with the mouse in some random textfields, and then in the dropdown, the scrollable-functionality in the dropdown is back. Maybe this can be usefull in finding the solution.

Update: I've found another work-arround. After the dropdown.open() is called, I've called the function recalculateDimensions. The width collapes to the minimum => the scrollable area is smaller => no scrolling possible in whitespace. The look of the dropdown is a little bit worse, because it's smaller then the input box, but there is almost no scrolling problem more. There is still a little bit of space where you cannot scroll.

Update2: previous update had some side effects, better workarround is calling recalculateDimensions(); in the onOpenEnd callback.

[Phillinger]

Found a temporary solution: It seems like if a select element with class "browser-default" is in the document when the init method is called, the bug would be gone. So we can append a out-of-document-flow, hidden select element to the body like this:

$(document).ready(function () {
    $('body').append('<select class="browser-default" style="position:absolute;visibility:hidden"></select>'); //this is the hack
    M.AutoInit();
})

I know this is not a ultimate solution, but it seems to temporarily fix the bug. A better solution would need to be done at the low-level of Materialize source code.

Thank you for this workarround! This stopped this annoying bug.

[bugy]

I think it's the same issue as #2592, please check my comment https://github.com/Dogfalo/materialize/issues/2592#issuecomment-470685962

In short: I guess it's more Chrome bug, than materializecss. Applying css backface-visibility: hidden helps there, and may be it can be used as an improvement in materializecss. However I don't know if it would cause any other issues

[dgrant069]

I tried backface-visibility: visible and it didn't help my situation. Oddly, backface-visibility: hidden did fix it on Chrome on Mac (this wasn't happening on MS 10)

[GitDeluxe]

ul.dropdown-content.select-dropdown{ overflow: auto !important; position: relative !important; z-index: 9999; } ul.dropdown-content.select-dropdown:hover{ overflow: auto !important; position: relative; backface-visibility: hidden; }

This is what i've done to fix the issue , it's dirty but effective

[lemontree2000]

I did this, Hope it helps you.

$('.dropdown-trigger').dropdown({
    container: document.body
});

[hardik-singhal]

In my case backface-visibility: hidden helps just added it in the CSS of the ui-select dropdown in angular js .ui-select-bootstrap>.ui-select-choices { backface-visibility: hidden; }