javascript - 使用 Chrome materialize v1.0.0 时，鼠标滚轮滚动在 Materialise 下拉列表中并不总是有效

Question

从 v0.100.2 升级到 v1.0.0 后，鼠标滚动只能在 Chrome 中间歇性工作。其他浏览器工作正常。

具体来说，如果您将鼠标光标放在下拉菜单的左上角区域并进行鼠标滚轮滚动，它就会起作用。但是，如果您在其他地方使用鼠标滚轮滚动光标，它将不起作用。

另一个观察结果是，如果您在单击一个下拉菜单之前单击一个下拉菜单，然后鼠标滚轮滚动另一个下拉菜单，它将起作用，因此推测它与下拉菜单关闭事件有关。

这是html结构:

    <div id="filters" class="modal" style="overflow-y: visible;">
    <div class="modal-content">
        <h4>Filters</h4>
        <div class="row">
            <div>
                <div class="input-field col s6">

                    <select data-group="List">
                        <option selected="selected" value="0">1</option>
                        <option value="9">2</option>
                        <option value="13">3</option>
                        <option value="12">4</option>
                        <option value="8">5</option>
                        <option value="11">6</option>
                        <option value="19">7</option>
                    </select>
                    <label for="List">Label</label>
                </div>
                <div class="input-field col s6">
                    <select data-group="ListAgain">
                        <option selected="selected" value="0">one</option>
                        <option value="26">two</option>
                        <option value="25">three</option>
                        <option value="24">four</option>
                        <option value="29">five</option>
                        <option value="23">six</option>
                        <option value="27">seven</option>
                        <option value="30">eight</option>
                        <option value="22">nine</option>
                        <option value="28">ten</option>
                        <option value="21">eleven</option>
                        <option value="31">twelve</option>
                        <option value="0">---</option>
                        <option value="10015">13</option>
                        <option value="10019">14</option>
                        <option value="10021">15</option>
                        <option value="10012">16</option>
                        <option value="10018">17</option>
                        <option value="10011">18</option>
                        <option value="10016">19</option>
                        <option value="10014">20</option>
                        <option value="10020">21</option>
                        <option value="10013">22</option>
                        <option value="10017">23</option>
                    </select>
                    <label for="ListAgain">Label Again</label>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="col right">
    <div class="right">
        <a id="show-filters" href="#filters" class="btn-floating modal-trigger" title="Filters">
            <i class="material-icons">filter_list</i>
        </a>
    </div>
</div>      

https://codepen.io/frostless/pen/bQPLqK (不总是工作 v1.0.0) https://codepen.io/frostless/pen/aKQEXO (始终工作 v0.100.2)

Answer 1

https://github.com/Dogfalo/materialize/issues/2592 中报告的问题

我找到的解决方案是为 .dropdown-content 类添加 backface-visibility:hidden。看起来某些浏览器无法正确处理转换和滚动条。