Skip to content

iOS <body> color flickering when toggling #231

@SimonEggert

Description

@SimonEggert

I've noticed an issue where a blank background in the color of the <body> is visible for a split second when toggling the react-modal-sheet. This only occurs on iOS and only when the page is scrolled down. When scrolled to the top, things are looking good. Android is fine, too.

I had trouble reproducing this in a simple scenario, so the issue could as well be related to our application. Do you have any idea what this could be about? When I use disableScrollLocking, the issue is gone, so I think it might be related to timings inside use-prevent-scroll.ts somehow. I've seen quite a lot of special handling for iOS in there.

EDIT: I've added some timeouts in between the Safari handling steps and it turns out the flickering occurs exactly here:

  // Scroll to the top. The negative margin on the body will make this appear the same.
  window.scrollTo(0, 0);

FWIW: The issue started appearing after we've updated from 4.4.0 to 5.2.1.

Any help would be appreciated. Thanks 🙂

I've added a very nice color to the body in order to make the effect more visible. In reality, the flicker is white 😅

react-modal-sheet.body.flicker.ios.mp4

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions