CSS Compatible

CSS compatibility issues

IOS scrolling stutters

question link

This is a possible solution to fix it.

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>
<style>
  .container {
    transform: translate(0%, 0px);
  }
  .item {
    // add two lines below to fix
    transform: translate3d(0, 0, 0);
    -webkit-overflow-scrolling: touch;
  }
</style>

Safari overflow-hidden-with-border-radius not work

question link

Releted post: https://www.sungikchoi.com/blog/safari-overflow-border-radius/

solution:

<div class="wrapper">
  <div class="item"></div>
</div>

<style>
  .wrapper {
    border-radius: 10px;
    overflow: hidden;
    // add this line to fix
    isolation: isolate;
  }
</style>

Ios Only Style

Sometimes we want styles to only apply to Ios.

The not operator is useful here if you don't want to add styles to Ios.

Compatibility

@supports (-webkit-touch-callout: initial) {
  .iosStyle {
    margin: 0;
  }
}