4

问题描述

在写transition动画的时候无意间发现有时候页面会卡死,查看任务管理器Chrome内存突然飙升,经过各种排除发现设置了transform:skew(90deg);的时候只要连续在相关transition动画元素上多次移入移出就会出现页面卡死的问题。这个是什么原因导致,还是说就是一个bug

简化后代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    div {
        width: 500px;
        height: 500px;
        background: #aaa;
    }
    div p {
        transition: all 0.35s;
        transform:skew(0deg);
    }
    div:hover p {
        transform:skew(90deg);
    }
    </style>
</head>
<body>
    <div>
        <p>连续移入移出导致卡死Debug</p>
    </div>
</body>
</html>

稳定复现方法及其他

连续移入移出就会导致卡死内存飙升的现象
另外经过多次测试只有transform:skew(90deg);属性,只有度数为90度的时候,只有Chrome有这个问题**

补充:Chrome版本是63.0.3239.132(正式版本) (64 位)

2个回答

0

版本 65.0.3315.3(正式版本)dev (64 位) , Ubuntu 16.04

没有你说的问题。

0

确实如此,我64版本会出现,升级到65无法重现了。

撰写答案