Tip#6 Getting rid of an undesirable pop-up scroll.

If a popup has its own scroll and in a hidden state you have just set up negative z-index (and, for instance opacity: 0) – then when trying to scroll the page itself, the pop-up can snap up the scroll and consequently the page’s scroll won’t work. As a remedy you can add ‘pointer-events: none’ to the modal window (in a closed state):

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

Tip#7 Fixing menu disappearing on scroll issue

If you want the menu to stick to the top of the page when scrolling, we recommend using the solution described further. By default position of the menu is set up to ‘absolute’ and when scrolling back, using JavaScript is changed to fixed. And when scrolling back up it is changed back to absolute.

However, on Safari + iOS, when changing position from ‘fixed’ to ‘absolute’ the menu disappears until the scroll finishes. Use ‘-webkit-sticky’ attribute to fix this. The menu won’t disappear anymore! Plus you won’t have to use the additional JavaScript, like:

.nav{
………
position: absolute;
}

.nav_fix{
position: fixed;
}

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

Tip#8. Background-attachment: fixed

By default background-attachment: fixed doesn’t work on IOS Safari. Therefore if you need to fix a background image you should use block or pseudo-element instead of the background:

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

Tip#9 Turning off system styles.

The  ‘-webkit-appearance: none’ attribute turns off system styles for the element, such as shadows, border-radius, etc. It is applied to input, textarea, and others. It is a very useful function to use when you need to apply a unified view for all the elements on different devices. 

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

Tip#10 Smooth scroll in blocks with overflow: scroll 

Using ‘-webkit-overflow-scrolling: touch’ attribute will add a smooth scroll to the blocks with ‘overflow: scroll’. We recommend adding this attribute everywhere where there could be a scroll inside of the block, for instance for the mobile menu.

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