Div 不读取带有 backface-visibility:hidden 的点击事件
我正在尝试淡入我为 iPad 构建的 web 应用程序中的 div 。 iPad 在尝试使用 jQuery 的 fadeIn() 方法时会卡住,因此我尝试使用 -webkit-transition: opacity 1s Linear
进行转换,并使用 javascript 将不透明度更改为 0 或 1。它看起来非常平滑,只是在淡入淡出结束时闪烁得非常刺耳。
据我了解此处不久前,当我设置 -webkit-backface-visibility: hide 时,这种闪烁立即消失。不幸的是,当我设置了该设置后,div 不再检测用于关闭它的单击或 touchstart 事件。我非常有信心这就是问题所在,因为当我在检查器中删除该属性时,它会完美地读取点击次数。我发现其他人在 SO 的评论中提到了类似的错误,但没有给出解决方案。
有谁知道如何解决这个问题?
I'm trying to fade in a div in a webapp I'm building for iPad. The iPad chokes trying to use jQuery's fadeIn() method so I'm trying to do the transition with -webkit-transition: opacity 1s linear
and changing the opacity to 0 or 1 with javascript. It looks pretty smooth, except that it flickers once quite jarringly at the end of the fade.
As I learned here a while back, this flicker instantly disappears when I set -webkit-backface-visibility: hidden
. Unfortunately, when I have that set, the div no longer detects the click or touchstart events used to dismiss it. I'm very confident this is the problem because when I remove that property in the inspector, it will read clicks perfectly. I found someone else mention a similar bug in a comment on SO but no solution was given.
Does anyone have any ideas how to work around this?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
诀窍是我试图读取点击的 div 位于折叠的 0x0 div 中。有点奇怪的是
backface-visibility
会成功或破坏它,但我能够通过使之前折叠的容器完整大小并添加 js 使其显示块并在不同时间不显示来解决该问题。The trick was that the divs I was trying to read the click on were in a collapsed 0x0 div. It's a bit bizarre that
backface-visibility
would make or break that, but I was able to fix the problem by making the previously collapsed container full size and adding js to turn it display block and none at various times.