Developing a responsive website that works well across various browsers and devices is tough. The difficulty is compounded by the fact that browser vendors keep adding distinct behaviors to improve user experience. We recently faced an issue with the auto zoom-in feature in Safari on iOS.
1. Screen Resize
IONIC allows to adjust the screen height whenever the current view is updated, either by loading a new screen or by inducing dynamic HTML. If the screen height adjustment is not handled properly, user will perceive a long delay before they can scroll to the end of the view. It is observed that; such height adjustment can take up to 10 to 15 seconds which is bad UX. To handle this gracefully, snippet similar to the below can be used, where ‘.element’ has to be replaced with the actual Id/CSS class name of the UI element.