iPhone Safari: How to Fix the Resize Event Issue During Scrolling

When browsing web pages on smartphone browsers—especially Safari on iPhone—the screen size may change during scrolling, which can trigger a resize event. This can cause issues, particularly when the page includes logic that depends on resize events.
In this article, we explain how to avoid this behavior.

What is Resize Processing?

The resize event is triggered when the browser window size changes. It is commonly used to dynamically adjust the layout of web pages. For example, in responsive design where content display changes based on screen width, the resize event is used to respond to browser size changes.

Why Does This Happen in iPhone Safari?

In iPhone Safari, the address bar appears and disappears during scrolling. This changes the visible area of the browser and triggers the resize event. However, since this behavior differs from an actual window resize, it can lead to unintended resize event triggers.

HTML, CSS, and JavaScript Code for Solving the Resize Event Issue During Scrolling in iPhone Safari

HTML Code

This defines a basic HTML structure and assumes that long content will be placed inside class=”content”.

<div class="content">
    <h1>Please scroll down in iPhone Safari.<br>This includes JavaScript processing that prevents resize events from firing while scrolling.<br>An alert message will appear when the browser width is changed.</h1>

</div>

CSS Code

A height is set for .content to create a vertically long page, enabling scrolling.

<style>
html,body {
    text-align: center;
    margin: 0;
    padding: 0;
    height: 100%;
}
h1{
    text-align: center;
    font-size: 14px;
    padding: 40px 0;
    line-height: 1.8em;
    position: fixed;
    width: 100%;
}
.content {
    height: 2000px; /* Represents long content */
    background-color: #f0f0f0;
}
</style>

JavaScript Code

A resize event listener is set, and processing is executed only when the window width actually changes. This ignores resize events caused by the address bar appearing/disappearing during scrolling.

<script>
let lastWidth = window.innerWidth;

window.addEventListener('resize', () => {
    if (window.innerWidth === lastWidth) {
        // Ignore resize event if width has not changed
        return;
    }
    lastWidth = window.innerWidth;
    // Process to run when width changes
    alert("The browser width has been changed.");
});
</script>

　
An alert message will be displayed when the browser width is changed.

Advantages

The advantage of this method is that it prevents false resize events caused by scrolling, and ensures that processing runs only when the window width actually changes, avoiding performance degradation and unexpected behavior.

Disadvantages

The disadvantages of this method include the following:

• Additional Processing:
  Extra logic is required to check the window width when the resize event fires. This may impact performance, especially on pages with heavy processing.
• Increased Complexity:
  Adding logic to determine whether the window width has changed increases code complexity, which may reduce maintainability.
• Browser Compatibility:
  This method is mainly tailored for iPhone Safari. If similar issues occur in other browsers or devices, different approaches may be required.

　
Considering these disadvantages, it is important to evaluate appropriate measures based on the requirements of each site and its user base.

Demo Page for Fixing Resize Event Trigger During Scrolling in iPhone Safari

You can check the demo page implementing the above code from the link below.

Demo page for fixing resize event trigger during scrolling in iPhone Safari

Conclusion

Unintended resize event triggers during scrolling in iPhone Safari can be problematic, especially for websites using responsive design or web applications that depend on resize events. By resolving this issue, you can provide a smoother browsing experience for users and improve the reliability and usability of your site.

　
*If you reuse this content, please do so at your own risk.
Do not reuse the Google Analytics tag in the head section of the demo page.