我得到了同样的问题Firefox Mac(并且尚未升级到优胜美地),但在我看来,你已经解决了自己的问题.我能看到的最简单的解决方案是在当前的一个下方添加一个额外的覆盖层,并将它们设置为不透明度0.98(这似乎是你可以去的最高点,但仍然有点击工作 – 至少在我的测试中).
显然它取决于你希望在你的叠加层上展示什么,但对于我在本地的测试,我将底层叠加(对不起,荒谬的名字)设置为黑色.这意味着下面的视频难以察觉.你可能甚至可以用不透明度降低一点,并且仍然用两层阻止所有内容,以防万一版本的Firefox版本的点击阻止的不透明度阈值不同.
.x-overlay {
opacity: 0.98;
...
}
.x-under-overlay {
opacity: 0.98;
position: absolute;
background: rgba(0,1);
width: 100%;
height: 100%;
overflow: hidden;
pointer-events: none;
}
NOTE: One downside to be aware of when using even slight opacity. For certain browsers (or at least versions of browsers) text that appears in a layer that has opacity can end up with buggy or missing anti-aliasing. But this mainly occurred in much older versions of Firefox and Chrome.
更新
好吧,这让我有点绕过墙壁,或弯道,或者可以用来描述不断期待一件事的体验的奇怪短语,但始终如一地获得另一个……这与the definition of crazy有着怪异的相似之处.
为什么[在这里插入home planet]为Codepen做了这个工作,但是在我自己的localhost-served iframe中没有…
在尝试了许多不同的东西之后,我发现了沙箱属性,我之前应该注意到它;特别考虑到所有奇怪的技巧,它可以启用和禁用本机浏览器进程.稍后快速试用和一些错误,似乎允许这对大多数在线代码小提琴手起作用的是以下内容:
仍然没有找到确切的原因,但如果我在我的localhost框架上启用上述功能,它就可以开始工作而不需要不透明技巧.我想它必须导致Firefox通过不同的进程,或者它只是禁用某种跨源点击劫持保护.
一个非常奇怪的事态……这是我对Chrome的期望!不好的’Firefox.