记录一个chrome 65渲染的bug

前段时间发现一个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

上一篇:算法学习之数组和字符串


下一篇:hdu 5885 FFT