Cross-Browser Issues and Solutions for Safari and Mobile Environments

Due to Chrome's high usage rate (62.58% as of June 2023), cross-browser issues in Safari and mobile environments are often overlooked during development. This article analyzes these issues and provides solutions. To reduce the development burden caused by browser-specific behavioral differences that remain even after the end of IE support, it offers specific code examples and root cause analysis.

Major Safari Browser Issues

Scroll position issues when removing internal elements occur when the scroll position moves abnormally upon the removal of elements within a scroll container. This is caused by differences in browser engines and must be handled to force behavior identical to Chrome.

Z-axis rendering errors during rotation occur when applying transform: rotate, causing elements containing scroll to create an independent stacking context and overlap other elements. Safari composites scroll areas as separate layers for recalculation. This can be resolved by adding transform: translate3d(0,0,0) or will-change: transform to the obscured element to designate it as an independent composited element.

Major Mobile Environment Issues

Failure to change scrollTop during scroll inertia occurs on iOS when changing the scrollTop value while scroll momentum is still active, causing the value to revert after the momentum ends. To resolve this, apply overflow: hidden immediately before changing scrollTop to block inertia, change the value, and then restore overflow: scroll.

Unintended clicks during touchend events occur when hiding an element at the touchend moment, causing a click event to be delivered to remaining child elements after the delay used for double-tap detection. This can be prevented by using the click event instead of touchend, or by adjusting the timing of DOM changes.