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
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 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 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.
Top comments (0)