Question

我正在使用FancyBox 3。

该页面使用CSS转换来创建3D悬停和“卡片翻转”动画。

-webkit-transform   :   rotateY(180deg);
        transform   :   rotateY(180deg);

-webkit-transform   :   rotateY(15deg);
        transform   :   rotateY(15deg);

但是，在Safari（和移动Safari）上，CSS转换会导致FancyBox 3出现渲染问题。

显示为，似乎所有应用了transform属性的东西都部分或完全位于灯箱上方。

（请参见this image here，another image here和a live version here.）

当我删除transform属性时，问题就消失了。

Chrome和Firefox没问题，灯箱按预期工作。

有什么主意是什么原因以及解决方案是什么？

编辑：我要提一下，此页面上有两个变换效果。

第一个是仅悬停15°。

第二个是单击时的180°。

任何一种都会导致相同的问题。

Answer 1

对于小于996像素的设备，消除：hover效果（因此请制作媒体屏幕并使用min-width:996px;），而在不使用鼠标悬停鼠标的平板电脑或手机上则不需要它。

其次，在max-width:995px;媒体屏幕上，删除资源和卡片背面的2个链接，这是太多信息，并减少font-size和line-height ，使其具有响应性。

Answer 2

我找不到解决此Safari问题的方法，也许尝试做不同的事情-在fancybox处于活动状态时禁用所有转换，类似这样的操作（未经测试；您可能需要调整以适合您的工作）：

body.fancybox-active .card * {
    transition: none !important;
}

CSS转换会导致Safari上的FancyBox 3出现渲染错误

2 个答案: