Question

我的问题与移动浏览器在具有overflow：scroll的div内部时似乎忽略border radius属性有关。下面是需要在移动浏览器中打开的jsfiddle中的问题示例。滚动时，您将看到红色框从灰色元素的顶部和底部的边界半径角移开。如果有人知道无论如何要摆脱这个问题，请帮忙！提前致谢！

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>

css：

.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;它会解决它：）

移动：溢出滚动元素中的元素忽略边框半径

1 个答案: