CSS将scale()与transform一起使用后,chrome中的滚动行为错误

时间:2018-09-25 17:53:25

标签: css google-chrome parallax

尝试在CSS中实现视差效果时遇到了一个问题:

我将我的设置为视角2px,然后设置样式为

transform: translateZ(-4px) scale(3); height: 500px;

问题是,尽管在Firefox中一切看起来和行为都很好,但在Chrome中div元素内的模糊文本上方,正文会滚动,就好像该元素在缩放之前没有被变换一样!

因此,如果我只删除主体的透视图,则即使应用透视图,该元素的可滚动区域也将保持完全相同,这是因为平移Z元素实际上比比例尺建议的要小(因为比例尺的备份到100%)。

一个“有效的”变换(它不会增加可滚动区域,因为在

元素之后存在足够高的内容)将为transform: translateZ(-0.5px) scale(1.25);,但这也改变了视差效果,这就是为什么我想要保留上一个!

在此问题上的任何帮助,我们将不胜感激。

此致

tagelicht

0 个答案:

没有答案