My Cross-Browsing Issues (Mostly Safari)

This post describes two major cross-browser issues encountered while developing a mobile web application, as well as other issues to consider.

I want to document this.

Viewport Height Calculation Issues Due to Browser's Address Bar and Navigation Bar

Safari and Samsung Internet have built-in bottom navigation bars. Unless show/hide is specifically set, they appear when you scroll down and disappear when you scroll up.

The problem is that the viewport changes due to these navigation bars.

For example, if the height is set to 100vh, the layout is drawn correctly when the navigation bar is not present. However, when the navigation bar appears, it covers the UI.

To solve this problem,

1. Use dvh.

dvh is a dynamic viewport that automatically reflects changes whenever the viewport height changes. Therefore, it can handle UI layout changes depending on the presence or absence of the address bar or bottom navigation.

2. svh can also be considered.

svh is the height of the UI area excluding the address bar and navigation bar. Using svh is more accurate when the address bar or navigation bar is expected to appear.

UI Shift Due to Virtual Keyboard When Selecting (Focusing) an Input

In mobile Safari, when an input was selected, the existing UI elements were pushed by the virtual keyboard. In other browsers, the virtual keyboard generally appears absolutely, but in Safari mobile web, it seemed like display block was applied, taking up space.

In Safari, this issue occurs because the viewport height is dynamically adjusted when the virtual keyboard comes up, causing elements using vh units to be readjusted. To solve this,

1. Use min-height.

Fixes the height to prevent the UI from shifting.

2. Apply vendor prefixes (described below).

Insert properties that apply to specific browsers such as Safari.

3. Dynamically control the viewport with JavaScript.

* This method is not recommended. The scroll height moves instantly, causing the layout to flicker.

An event listener is attached to the resize event to detect viewport changes and apply appropriate styles.

3-1. Control the position when the focusin event occurs.

3-2. Control the position when the virtual keyboard appears. (Applies a class in the example below)

It is best to solve the problem entirely with CSS. However, if the above methods do not work, check if the element has position: absolute or fixed, and try removing the top, right, left, and bottom properties and modifying the CSS.

Other Considerations

Here are some other things to consider when developing mobile web applications for Safari.

1. Use vendor prefixes when using certain properties.

* Vendor prefixes are prefixes that allow browsers to understand and render specific CSS properties. They ensure that CSS implemented differently across browsers is applied as intended. This ensures consistency across browsers and compatibility with older browser versions.

Types

-webkit-: Chrome, Safari, etc.
-moz-: Mozilla Firefox
-ms-: Internet Explorer and Edge
-o-: Opera

Typical properties requiring vendor prefixes are as follows:

In addition, Safari limits LocalStorage and SessionStorage capacity to approximately 5MB and does not share storage space between tabs, so caution is needed.