iOS & Webkit Quirks

Automatic zoom on form elements

Description:

If the font size of a form input element is less than 1rem or 16px, Safari on iOS will automatically zoom in on the input when it is selected. It will zoom in until the font size is visually equivalent to 1rem or 16px.

Solutions:

Make the font size of your form input elements at least 1rem or 16px.

Updated:

22 Feb 2023

Keywords:

HTML, CSS, A11Y

Font size affects button padding

Description:

In Safari on iOS, the padding-left and padding-right properties of buttons are affected by the button's font size. If you don't specify these values, Safari on iOS will render your button with unexpected padding.

Solutions:

Explicitly define padding for all button elements.
```
button {
    padding: 0;
}
```

Updated:

1 Feb 2023

Keywords:

HTML, CSS

Phone numbers render as links

Description:

Safari on iOS automatically transforms phone numbers into links.

Solutions:

Use a meta tag to stop the transformation.

<meta name="format-detection" content="telephone=no"/>

Updated:

1 Feb 2023

Keywords:

HTML

Ogg audio files don't work

Description:

Safari on iOS does not support .ogg or .ogv filetypes.

Solutions:

Use a different audio filetype that is supported on iOS, such as .mp3 or .aac.
Use ogv.js, a media decoder and player which can be used for basic playback of Ogg Theora/Vorbis media on browsers that don't support Ogg natively.

Updated:

1 Feb 2023

Keywords:

Audiovisual

Window:resize event triggers on scroll

Description:

Scrolling a page in Safari on iOS triggers the window:resize event.

Solutions:

Get the window's width and/or height at the start of your JS. Then, for your function which is triggered by the "resize" event listener, add an if statement to check if the window has truly been resized or just scrolled.

let startingWidth = window.innerWidth;

window.addEventListener("resize", example);
        
function example() {
    if (startingWidth != window.innerWidth) {
        console.log("It has been resized!");
    } else {
        return;
    }
}

Updated:

1 Feb 2023

Keywords:

JS

100vh overflows the visible area

Description:

In Safari on iOS, the value of 100vh is computed including parts of the viewport that are sometimes hidden by the browser interface. When the browser interface is visible, elements with a height of 100vh are taller than the actual viewport height.

Solutions:

Include -webkit-fill-available in your CSS.

body {
    min-height: 100vh;
    min-height: -webkit-fill-available;
}
      
html {
    height: -webkit-fill-available;
}

Use the PostCSS 100vh fix plugin.
Use the React Div100vh component.
Solutions by Susie Kim: Use CSS media queries, or target innerHeight with JS. Read full article here.
Solution by Maciej Trzciński: Target appHeight with JS. Read full article here.

Updated:

1 Feb 2023

Keywords:

HTML, CSS, JS