Scrolling on iOS

This was not a fun bug to encounter the weekend right before a deadline. I was building a fixed position date picker at the bottom of the viewport on mobile devices. It has a click event listener on it that triggered the opening of a modal which contained the flatpickr calendar. The issue was when the user scrolled, the modal wouldn’t open. The modal would only open on load.

The element on Android was behaving as expected (of course); however, iOS was another story. Using a combination of lambatest.com and browserstack.com, I tested on the latest iOS devices and several older models.

The calendar behavior and appearance was set to trigger on resize to toggle between the desktop version and mobile version of the calendar. As it turns out, iOS has a “feature” when the user scrolls, it triggers a resize event.

I discovered this jQuery solution on stackoverflow:

// Store the window width
let windowWidthResize = $(window).width();

// Trigger Resize Event
$(window).resize(function () {

        // Check window width has actually changed and it's not just iOS triggering a resize event on scroll
        if ($(window).width() != windowWidthResize) {

            // Update the window width for next time
            windowWidthResize = $(window).width();

            // Run Mobile detect function
            detectMobileForBBModal();
        }        
});

The first line initializes a variable that stores the width of the window. The next line adds the resize event listener. The conditional checks if the window width has not changed by comparing it to width variable. If the width has not changed, the new width after resize gets assigned to the variable then you can run your function or whatever it is you want to do.

The stack overflow posting was answered 7 years ago. At the time of this writing, scrolling on iOS, version 14.5.1, still fires a resize event. I have yet to determine if this is a feature or a bug.