记录一个chrome 65渲染的bug
前段时间发现一个chrome 65+的BUG(chrome已更新到66,BUG仍然存在),一个元素同时使用了以下样式(失去焦点和css3的Z轴平移0deg),渲染异常
/*bug style*/ filter: blur(4px); transform: translateZ(0)
渲染截图:
正常渲染截图应该是:
完整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