Question

在safari上有一个奇怪的现象：当父元素具有背景时，父元素的border-radius不起作用。

删除-webkit-overflow-scrolling: touch;时，一切正常。

在Safari中设置-webkit-overflow-scrolling: touch;时会发生什么？如何保持-webkit-overflow-scrolling: touch;并同时防止这种奇怪的现象？

html,
body {
  background: red;
}

* {
  padding: 0;
  margin: 0;
}

.main {
  height: 250px;
  width: 250px;
  margin: 10px;
  overflow: scroll;
  border-radius: 20px;
  background: green;
  -webkit-overflow-scrolling: touch; //ios平滑滚动
}

ul li {
  list-style-type: none;
}

li:nth-child(even) {
  background: gray;
}

<div class="main">
  <ul>
    <li>This covers miscellaneous DOM extensions used by Safari in macOS and iOS. These extensions include DOM touch events for processing gestures for devices that have a touch screen and visual effects that support 2D and 3D transforms, animation, and transitions.
      Most of the classes described in this reference are Apple extensions that may also be proposed W3C standards.</li>
    <li>This covers miscellaneous DOM extensions used by Safari in macOS and iOS. These extensions include DOM touch events for processing gestures for devices that have a touch screen and visual effects that support 2D and 3D transforms, animation, and transitions.
      Most of the classes described in this reference are Apple extensions that may also be proposed W3C standards.</li>
    ...
  </ul>
</div>

Answer 1

我在同事的帮助下解决了这个问题，如下：

    .main {
        margin: 10px;
        background: green;
        overflow: scroll;
        border-radius: 20px;
    }
    .main .wrapper {
        height: 250px;
        overflow: scroll;
        border-radius: 20px;
    }

我在滚动区域（.main）和滚动内容（ul）之间添加一个包装元素，然后将包装器高度，overflow和border-radius设置为与滚动区域（.main）相同。但是当设置-webkit-overflow-scrolling作为触摸时会发生什么？期待您的回答。

-webkit-overflow-scrolling：touch;在子元素中设置背景时，将忽略border-radius

1 个答案: