Question

我在支持它的浏览器上使用HTML5全屏模式（不能共享代码链接，它不是实时的）。我遇到了一个我认为可能是Safari漏洞的问题，但我也想在这里发帖，看看是否有人对解决方法有任何建议。

我的应用程序正在使用一个图像滑块，其上面有一个带有链接的div用于悬停效果（很难解释，但请耐心等待）。图像和悬停DIV的默认宽度是1150像素（通过CSS），并使用媒体查询来指定链接div宽度（这是SCSS代码，因此对于那些不习惯它的人看起来很有趣）。

.links {
    width: 1150px;
    height: 744px;      
    position: absolute;
    z-index: 101;
     @media (max-width: 1200px) {
        width: 910px;
        height: 588.77px;
    }    
}

我还提供了一种全屏显示方式（通过HTML5全屏）并指定此div的自定义宽度/高度（因为屏幕尺寸会有所不同，我的链接必须悬停在某些位置，使用百分比）。所有这一切都很好。在低于和超过1200px宽的范围内拖动浏览器，并且悬停状态与图像正确缩放。转到全屏，一切都在图像和徘徊上适当缩放。但是，如果我在浏览器中启动 1）尺寸低于1200像素 2）转到全屏 3）然后退出全屏模式仅在Safari中它不会根据媒体查询进行缩放，并使.links类的大小为1150像素宽。

如果我调整任何大小，它会恢复正常工作/缩放。

我想不出在resize事件之外触发CSS媒体查询的方法。我不想在全屏退出时通过jQuery添加单独的类，因为我必须在随后的大小调整中删除它。

针对变通方法的任何其他建议？

Answer 1

好的，所以我在我的应用程序之外使用相同的条件（没有其他代码）做了一个模型，并意识到这在Safari中进行了测试。我正在使用：

$(document).stop(true, true);

在一个必须退出全屏的事件中。显然Safari并不喜欢这个。现在已经删除它，它再次在Safari中正常工作。

当退出html5全屏模式时，css媒体查询不起作用 - safari

1 个答案: