MDL - 涟漪效应忽略边距/填充

Question

我在我的项目中使用react和mdl，并且我尝试制作一个菜单组件，到目前为止我对结果感到满意，除了一件事，有时涟漪效应会忽略填充和边距以及它们之间的波纹，只要菜单上有滚动条，它就会像这样连线：

我瞄准的结果（在所有情况下）：

当有滚动条和边距时我得到的结果：

一些代码：

菜单组件：

import React from 'react';
import MenuItem from './MenuItem';

export default class Menu extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            isMaximized: true,
            selectedMenuItem: this.props.modules[0].screens[0].id
        };

        this.handleMenuToggle = this.handleMenuToggle.bind(this);
        this.onMenuItemClick = this.onMenuItemClick.bind(this);
    }

    handleMenuToggle() {
        this.setState({ isMaximized: !this.state.isMaximized });
    }

    onMenuItemClick(screenId) {
        this.setState({ selectedMenuItem: screenId });
    }

    render () {
        let drawerClassNames = this.state.isMaximized ? 'drawerMaximized' : 'drawerMinimized';
        return (
            <div className='mdl-js-layout mdl-layout--fixed-drawer'>
                <div className={'mdl-layout__drawer drawer scrollbar ' + drawerClassNames }>
                    <ul>
                    {this.props.modules.map((module, index) =>
                        <li key={index}>
                            <div className="mdl-layout-title menuHeader">{module.moduleName}</div>
                            <ul>
                                {module.screens.map((screen) =>
                                    <MenuItem key={screen.id}
                                              id={screen.id}
                                              screenName={screen.screenName}
                                              icon={screen.icon}
                                              isSelected={ screen.id === this.state.selectedMenuItem ? true : false }
                                              onClick={this.onMenuItemClick}/>
                                )}
                            </ul>
                        </li>)}
                    </ul>
                </div>
            </div>
        );
    }
}

MenuItem组件：

import React from 'react'

export default class MenuItem extends React.Component {
    constructor(props) {
        super(props);

        this.onClick = this.onClick.bind(this);
    }

    onClick() {
        this.props.onClick(this.props.id);
    }

    render () {
        let liClassNames = this.props.isSelected ? 'menuItemSelected' : 'menuItemNotSelected';
        return (
            <li className={'mdl-list__item mdl-button mdl-js-button mdl-js-ripple-effect menuItem ' + liClassNames} onClick={this.onClick}>
                <div className='mdl-list__item-primary-content'>
                    <i className={'material-icons menuItemIcon md-28'}>{this.props.icon}</i>
                    <span>{this.props.screenName}</span>
                </div>
            </li>
        )
    }
}

css：

.drawer {
    direction: rtl;
    right: 0;
    background-color: #303030;
}

.scrollbar {

}

ul{
    margin: 0;
    padding: 0;
}

.scrollbar::-webkit-scrollbar {
    width: 14px;
    height: 18px;
}

.scrollbar::-webkit-scrollbar-thumb {
    height: 6px;
    border: 4px solid rgba(0, 0, 0, 0);
    background-clip: padding-box;
    -webkit-border-radius: 7px;
    background-color: rgba(255, 255, 255, 0.15);
    -webkit-box-shadow: inset -1px -1px 0px rgba(0, 0, 0, 0.05), inset 1px 1px 0px rgba(0, 0, 0, 0.05);
}

.scrollbar::-webkit-scrollbar-button {
    width: 0;
    height: 0;
    display: none;
}

.scrollbar::-webkit-scrollbar-corner {
    background-color: transparent;
}

.drawerMinimized {
    right: 0;
    animation: minimize-drawer 0.2s;
    animation-fill-mode: forwards;
}

.drawerMaximized {
    right: 0;
    animation: maximize-drawer 0.2s;
    animation-fill-mode: forwards;
}

@keyframes maximize-drawer {
    to { width: 240px };
}

@keyframes minimize-drawer {
    to { width: 64px };
}

.menuItemIcon {
    padding-left: 16px;
}

.menuItem {
    cursor: pointer;
    font-size: 16px;
    padding: 16px;
    min-height: 40px;
    margin-right: 20px;
}

.menuItemSelected {
    color: rgba(255, 255, 255, 1);
}

.menuItemNotSelected {
    color: rgba(255, 255, 255, 0.3);
}

.menuHeader {
    padding: 16px;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.1);
}

问题是什么/我做错了什么？