1

There is a strange phenomenon on safari: border-radius of parent element doesn't work when child element has a background.

Everything is OK when remove -webkit-overflow-scrolling: touch;.

What happen when set -webkit-overflow-scrolling: touch; in safari ? How can I keep -webkit-overflow-scrolling: touch; and prevent the strange phenomenon at the same time?

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>
SapuSeven
  • 1,473
  • 17
  • 30
chenluyan
  • 221
  • 1
  • 2
  • 6

1 Answers1

0

I have solved this issue in the help of my colleague, as follows:

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

I add a wrapper element between scroll area(.main) and scroll content(ul), and then set wrapper height, overflow and border-radius the same as scroll area(.main). But what happen when set -webkit-overflow-scrolling as touch ? Looking forward to your answer.

chenluyan
  • 221
  • 1
  • 2
  • 6