仅限 Safari
我在桌面 Safari 上遇到了奇怪的错误。 我想在滚动网站时到达某个点后显示模态。不幸的是,当我们在 safari 上这样做时,模式是不可点击的(z-index 问题?)。我一直在使用 react + react-modal,但我认为这个问题与其中任何一个都无关。
源代码+演示:https://codesandbox.io/s/p5x9331y8x
我注意到,当我们将触发函数包装在 setTimeout()
中时,我们将能够看到模式只有在滚动事件出现时才会停止工作。 https://codesandbox.io/s/3q7rmpj1mq
Ofc setTimeout()
不是这里的解决方案...
我发现了与此相关的问题,但其中任何一个都不完全符合我的问题:
- > https://github.com/reactjs/react-modal/issues/369
- > https://css-tricks.com/forums/topic/safari-for-ios-z-index-ordering-bug-while-scrolling-a-page-with-a-fixed-element/
此外,当 body 上没有 overflow: hidden
时,它可以正常工作,但这也不是这里的解决方案(显然我们想防止背景滚动)。
注意:关于演示,在到达页面的最后一部分后出现模态(此问题已重新创建)。最好全屏打开页面进行测试。
非常感谢任何帮助。
最佳答案
问题已通过从 overflow: hidden
更改为 overflow-y: hidden
解决...
关于javascript - 模态出现后不可点击 - Safari,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55242525/