-webkit-overflow-scrolling:触摸；在子元素中设置背景时，忽略边框半径

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)之间添加了一个包装元素，然后将包装高度、溢出和边框半径设置为与滚动区域(.main)相同。但是当set -webkit-overflow-scrolling as touch时会发生什么呢？期待您的答复。