简单的 CSS 使 Chrome/内存崩溃

问题描述

我遇到了一个严重的问题，该页面曾经在 Chrome 中没有问题。

我正在尝试使用缩放、倾斜、平移X、旋转变换来制作图像悬停过渡。该图像具有对象适合：封面。警告虽然 Firefox 和 Edge 没有问题，但 Chrome 由于内存过载而严重崩溃。

这是简化的情况

  .wrapper {
            width: 33vw;
            height: 33vw;
            background: #000;
        }

        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transform: scale(0) skew(90deg) translateX(-150px) rotate(70deg);
            transition: 2s all;
        }

        .wrapper:hover img {
            transform: scale(1) skew(0) translateX(0) rotate(0);
        }

<!DOCTYPE html>
<html lang="en">

<head>
    <Meta charset="UTF-8">
    <Meta http-equiv="X-UA-Compatible" content="IE=edge">
    <Meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Test</title>
</head>

<body>
    <div class="wrapper">
        <img src="https://i.picsum.photos/id/1011/5472/3648.jpg?hmac=Koo9845x2akkVzVFX3xxAc9BCkeGYA9VRVfLE4f0Zzk"
            alt="Frau und Wasser">
    </div>
</body>

</html>

我想知道是否有人可以帮助我确认行为，是否有 CSS 专家，谁知道建议？

非常感谢我的英语。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

css-transitions google-chrome hover skew