Safari/iPhone compatibility issues
Published: 2021-04-13 14:39:18

I've been facing a lot of compatibility issues in safari that worked fine in other browsers. So i decided to put all of them in one place for reference.

##1. Animations

I wanted to add a pulse effect to a rounded div so i animated box-shadow property like so:

```
.pulse {
  animation: pulse-animation 1s infinite;
  border-radius: 50%;
}

@keyframes pulse-animation {
  0% {
     box-shadow: 0 0 0 0px #00b2ba;
  }
  100% {
    box-shadow: 0 0 5px 12px rgba(0, 0, 0, 0);
  }
}
```

This worked fine but the box shadow animation was behaving unexpectedly in safari browser. I found out that the safe properties to be used in animations are **opacity and transform**. So i found a solution to use before and after pseudo elements and apply this effect using opacity and transform like so:

```
.pulse {
  position: relative;

  &::after {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    height: 100%;
    border: 5px solid rgba(0, 178, 186, 0.7);
    border-radius: 50%;
    animation-name: pulse;
    animation-duration: 1s;
    animation-iteration-count: infinite;
  }
}

@keyframes pulse {
  0% {
    opacity: 1;
    transform: scale(1);
  }

  100% {
    opacity: 0;
    transform: scale(2.5);
  }
}
```

You can find the live example in [here](https://codepen.io/NouranS96/pen/GRrqKow)

##2. Scroll bouncing behavior

Scroll bouncing (also sometimes referred to as scroll **‘rubber-banding’**, or **‘elastic scrolling’**) is often used to refer to the effect you see when you scroll to the very top of a page or HTML element, or to the bottom of a page or element, on a device using a touchscreen or a trackpad, and empty space can be seen for a moment before the element or page springs back and aligns itself back to its top/bottom (when you release your touch/fingers).

You can fix this behavior by giving body and html elements `overflow: hidden` and add a body wrapper element that has the following styles:

```
<head>
   <style>
        .body-wrapper {
            width: 100vw;
            height: 100vh;
            overflow-y: auto;
            overflow-x: hidden;
            position: relative;
            -webkit-overflow-scrolling: touch; // This 
            property could lead to bouncing of element 
            positioned as fixed
         }
</style>
</head>
<body>
    <div class="body-wrapper">
        // Your elements goes here
    </div>
</body>
```

You could refer to this [link](https://www.smashingmagazine.com/2018/08/scroll-bouncing-websites/) for other ways

##3. Notch of new iPhones

The upper notch of new iphone devices could prevent your website from taking full width in landscape orientation if not handled properly.

You could prevent this scenario by adding this viewport meta tag to your head element

```
<meta name='viewport' content='initial-scale=1, viewport-fit=cover'>
```
And add these styles

```
@supports (padding: max(0px)) {
  body,
  header,
  footer {
    padding-left: min(0vmin, env(safe-area-inset-left));
    padding-right: min(0vmin, env(safe-area-inset-right));
  }
}
```
These safe areas will guarantee you content to be shown no matter what the orientation is.

You could also refer to this [link](https://bubblin.io/blog/notch) for more details

I tried to sum up all the issues i faced with safari or iphones while coding but this article will be updated with any other cases i will face.

Hope it helps someone.