记录一个chrome 65渲染的bug

时间：2022-02-08 05:30:20

前段时间发现一个chrome 65+的BUG（chrome已更新到66，BUG仍然存在），一个元素同时使用了以下样式（失去焦点和css3的Z轴平移0deg），渲染异常

/*bug style*/
filter: blur(4px);
transform: translateZ(0)

渲染截图：

记录一个chrome 65渲染的bug

 

正常渲染截图应该是：

记录一个chrome 65渲染的bug

完整demo：

<!DOCTYPE html>
<html>
<head>
    <title>chrome 65 css filter bug</title>
    <style>
        .demo{
            width: 200px;
            height: 200px;
            background-color: green;
            margin: 100px;
            /*bug style*/
            filter: blur(4px);
            transform: translateZ(0);
        }
    </style>
</head>
<body>
    <div class="demo"></div>
</body>
</html>

 

 复现环境：

Mac mini OS 10.11.6

chrome 65+

给chrome团队提了BUG，已经确认是BUG https://bugs.chromium.org/p/chromium/issues/detail?id=830242

 

标签：

相关文章