CSS and iOS Safari

Good day, dear Khabrahabrites!

You always want your site to look equally good on different devices, including mobile. But, while the behavior in Android browsers is largely predictable, then with iOS there are a number of "surprises". We’ll talk about them today!

Some of the examples have already been published on Habré, but I still decided to include them in the article. I will divide the article into two parts. In the first - I’ll give a list of useful css-properties for webkit, and in the second we’ll talk about fixes of problems that occur when verst for iOS Safari.

The properties

1. -webkit-overflow-scrolling: touch

This css property will add a smooth scroll in blocks with overflow: scroll. I recommend adding this property wherever scrolling can occur inside the block, for example, in the mobile menu.

.ov-scroll{
	overflow-y: auto;
	-webkit-overflow-scrolling:touch;
}

2. -webkit-text-size-adjust: none

Disables the scaling of the text in a horizontal orientation.

body{
	-webkit-text-size-adjust: none;
}

Example:



3. -webkit-tap-highlight-color: #ccc

Sets the highlight color of the active element when taping on it (a, label). By default, this is a gray color, and often can be of no use, or get out of the general design.

a, label{
	-webkit-tap-highlight-color: transparent;
}

An example of such a selection:



4. -webkit-appearance: none

Disables overlaying on elements of system styles: shadows, border-radius, etc. Applies to input (but not all), textarea, etc. It is convenient when you need to set a single view of elements on all devices.

input[type=text], input[type=submit], textarea{
	-webkit-appearance: none;
} 

It is used not only in layout for Safari.

5. media (pointer: coarse)

This media query will allow you to separately prescribe styles only for devices that support touch. Thus, on touch devices, you can turn off unnecessary animations that are unnecessary for these types of devices.

@media (pointer:coarse){
...
}

Can be used not only in layout for Safari.

Fixes

1. background-attachment: fixed

Problem: background-attachment: fixed does not work in iOS Safari.

Solution: To fix not a background, but a block or a pseudo-element.

body:before {
    content: '';
    background-image: url(...);
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: -1;
}

2. Unwanted scroll of the modal window.

Problem: This is a rather rare case, but for general information, I think it will also be useful to know about it. If the modal window has its own scrolling and when closed, the negative z-index (and, for example, opacity: 0) is simply set, then when you try to scroll the page, the modal window can intercept the scroll. As a result, the page will not scroll.

Solution: Add pointer-events: none to the modal window in the closed state.

.modal{
	position: fixed;
	z-index: -9;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	opacity: 0;
	pointer-events: none;
}

3. Disappearance of the menu when scrolling.
In order for the menu to “stick” to the upper border of the screen when scrolling the page, the following technique is often used. Initially, the menu has the position: absolute property set, and when it reaches the top border of the window, through js it changes to fixed. And when scrolling the page to the beginning, the value again changes to absolute.

Problem: In Safari on iOS, when changing position from fixed to absolute, the menu disappears from the screen until the scroll is complete.

Solution: Use position: -webkit-sticky for the menu. The behavior of the menu will be comparable to the above, but nothing will disappear! Plus, no need to use js

.nav{
	.........
	position: absolute;
}
.nav_fix{
	position: fixed;
}
@supports ((position:sticky) or (position:-webkit-sticky)){
	.nav, .nav_fix{
		position: -webkit-sticky;
		position: sticky;
	}
}

By the way, the sticky value for the position property is now supported by a large number of browsers, so it can also be used in desktop browsers.

4. Block with position: fixed when scrolling.

If I saw implementations of solutions to previous problems on some sites, then this problem is constantly encountered on sites.

Problem: When scrolling in the browser, the screen height changes. Hence, if you do not block the scroll when the menu is open or the modal window, a similar effect occurs:



Solution: You need to do the following "trick" using transform.

.nav{
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	top: -70px;
	padding-bottom: 70px;
	transform: translateY(70px);
}

A value of 70px covers the difference in window height changes. And only transform allows you to draw the background of an element outside the screen in this situation.

conclusions

And there aren’t any conclusions, just use it) If you still know useful css-properties or “fixes” that are applicable in practice, write in the comments!

Thanks for attention!

Update
In properties, item 5 has been changed. media (hover) has narrow support. Thanks to dom1n1k for the valuable comment.