手机 : Elements in overflow scroll element ignore border radius

Question

我的问题与移动浏览器如何在带有 overflow:scroll 的 div 中似乎忽略边框半径属性有关。以下是需要在移动浏览器中打开的 jsfiddle 中的问题示例。当您滚动时，您会看到红色框从灰色元素顶部和底部的 border-radius Angular 处伸出。如果有人知道无论如何要摆脱这个问题，请帮忙!提前致谢!

http://jsfiddle.net/Thatguyhampton/LLn74/

HTML:

<div class="card scrollable">
    <div class="content"></div>
    <div class="content"></div>
    <div class="content"></div>
    <div class="content"></div>
    <div class="content"></div>
    <div class="content"></div>
    <div class="content"></div>
    <div class="content"></div>
</div>

样式:

.scrollable {
    box-sizing: border-box;
    overflow: auto;
    overflow-y: overlay;
    position: relative;
    -webkit-overflow-scrolling: touch;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

.card {
    height: 300px;
    width: 100px;
    background-color: grey;
    border-radius: .5em;
}

.content {
    height: 50px;
    width: 100%;
    background-color : red;
    margin-top: 10px;
    margin-bottom: 10px;
}

只是想强调一下，我只在移动浏览器上看到这个。

Answer 1

删除 -webkit-overflow-scrolling: touch;它会修复它:)