This article presents solutions to cross-browsing issues encountered in Safari browser during mobile web development, focusing on viewport height calculation problems and UI shift issues due to virtual keyboards.
Viewport height issues can be resolved using dvh or svh, while virtual keyboard issues can be addressed using min-height, vendor prefixes, and dynamic control using JavaScript.
When developing for Safari mobile web, consider using vendor prefixes and be aware of LocalStorage and SessionStorage capacity limits (approximately 5MB) and the inability to share Storage between tabs.
I diligently wrote my post and hit save, only to have it vanish with a 404 error ㅠㅠ
I'd like to document two troublesome cross-browser issues I encountered while developing a mobile web application, along with other issues to consider.
I want to record them.
Viewport Height Calculation Issues Caused by the 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 these cause the viewport to change, not remain fixed.
For example, if you set the height to 100vh, the layout is drawn correctly when the navigation bar is not present, but when the navigation bar appears, it obscures 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. Consider svh as well.
svh is the height of the UI area excluding the address bar or navigation. In situations where the address bar or navigation is expected to appear, using svh is more accurate.
UI Shifting Issue Due to Virtual Keyboard When Selecting input
When I selected an input in mobile Safari, the existing UI elements shifted due to the virtual keyboard. In other browsers, the virtual keyboard generally appears absolutely, but in mobile Safari, it occupied space as if a display block were applied.
In Safari, this is a problem that 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.
Fix the height to prevent the UI from shifting.
html, body{height:100%;min-height:100vh;/* Set a fixed minimum height */overflow: hidden;}
Insert properties that apply to specific browsers like Safari.
3. Dynamically control the viewport with JavaScript.
window.addEventListener('resize',()=>{if(window.innerHeight<500){// Code to execute when the keyboard appearsdocument.body.classList.add('keyboard-visible');}else{// Code to execute when the keyboard disappearsdocument.body.classList.remove('keyboard-visible');}});
Listen for 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)
let originalHeight =window.innerHeight;window.addEventListener('resize',()=>{if(window.innerHeight< originalHeight){// Virtual keyboard is updocument.body.classList.add('keyboard-visible');}else{// Virtual keyboard is downdocument.body.classList.remove('keyboard-visible');}});
In my case, I solved it using method 3-1. If method 3-1 doesn't work as intended, first use the code below to check if it's working as expected.
I also looked into some points to consider when developing a mobile web application for Safari.
1. Use vendor prefixes when using certain properties.
* Vendor prefixes are prefixes that allow browsers to understand and render specific CSS properties, ensuring that CSS implemented differently by different browsers is applied as intended. This ensures consistency across browsers and compatibility with older browsers.
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.
P.S. I'm so sad that my original post was lost. The post I uploaded isn't high-quality,,,ㅠ I really need to use autosave.