CODEWITHSUNDEEP
javascripthtmlcsssafarireact-modal
bdnvrk
bdnvrk

Reputation: 11

Modal is not clickable after appearing - Safari

SAFARI ONLY

I have encountered weird bug on desktop Safari. I wanted to display modal after reaching some point when scrolling website. Unfortunately when we do that on safari modal is not clickable (z-index issue?). I've been using react + react-modal, but I think that this issue is not related to any of those.

Source code + demo: https://codesandbox.io/s/p5x9331y8x

I've noticed that when we wrap triggering function in setTimeout() we will be able to see that modal stops working only when it appear while scroll event. https://codesandbox.io/s/3q7rmpj1mq

Ofc setTimeout() is not a solution here... I've found issues related to this but any of them is not matching my problem exactly:

Also when there is no overflow: hidden on body it works properly but thats not a solution here either (obviously we want to prevent background from scrolling).

Note: Regarding demo, modal appears after reaching last section of page (this problem is recreated). It's good to open page in full screen for testing.

Any help would be really appreciated.

Upvotes: 0

Views: 978

Answers (1)

bdnvrk
bdnvrk

Reputation: 11

Issue was solved by changing from overflow: hidden to overflow-y: hidden...

Upvotes: 1

Related Questions