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

记录一个chrome 65渲染的bug的更多相关文章

  1. 记录一个从没见过的bug

    js的默认启动 $(function(){ )}; 不识别,意思是如果你把js内容放入这个东西里面,它不会执行.必须把它去掉才可以. 包括.tag里的文件也是一样. 这是发生在系统框架迁移发生的事,以 ...

  2. Spring 循环引用（一）一个循环依赖引发的 BUG

    Spring 循环引用(一)一个循环依赖引发的 BUG Spring 系列目录(https://www.cnblogs.com/binarylei/p/10198698.html) Spring 循环 ...

  3. 【笔记】让360浏览器用chrome 内核渲染你的网页

    学校的项目还处在测试阶段 有一个痛点就是有一些页面在360浏览器中默认以ie 内核渲染 这样很不好 以为部分页面因技术方面的不足导致并不能很好地兼容ie 浏览器,于是在网上找了一下答案 可真还有解决方 ...

  4. Directx11教程(65) 渲染到纹理

    原文:Directx11教程(65) 渲染到纹理     通常情况下,我们的render target都是后缓冲,但也可以把render target设置为一个2d 纹理,然后再通过贴图的方式,把这个 ...

  5. IE8使用chrome内核渲染

    1  第一步  https://download.csdn.net/download/qq_34626479/11223448  下载chrome frame安装包; 2  第二步  网页头部添加一行 ...

  6. 动手做第一个Chrome插件

    Chrome插件是令人惊讶的简单,一旦你弄懂它的工作和实现原理.它是由一部分HTML,一部分Js,然后混合了一个叫做manifest.json的Json文件组合而成的整体.这意味着你可以使用你最擅长的 ...

  7. 一个Chrome拓展——HttpPost

    周末花了点时间做了一个chrome拓展,叫HttpPost,顾名思义是用来测试http的post请求. 先直接看效果 插件与拓展 在说这个做的过程前,先说明什么是Chrome插件.Chrome拓展 1 ...

  8. 我的第一个chrome扩展（1）——读样例，实现时钟

    学习chrome扩展开发: 与网页类似,需要的知识:html,javascript chrome扩展程序的构成: manifest.json:对扩展程序的整体描述文件 { "manifest ...

  9. 如何通过写一个chrome扩展启动本地程序

    @(编程) [toc] 本文介绍如何利用Chrome 的插件, 从我们的一个网站中启动一个我们的本地程序.本文的环境是windows10,本文的例子是通过点击网页上的一个button,调用本地的wor ...

随机推荐

  1. 用ngif 多次判断 Expression has changed after it was checked

    昨天遇到一个问题 ,用ng Expression has changed after it was checked 查了一下说在angular2中,这个错误只会在dev开发模式下出现,在pro发布版本 ...

  2. 将CSDN内容移过来

    将CSND主要博客内容移过来 1.Linux rpm.yum.ssh.apache.Samba等讲解 https://blog.csdn.net/weixin_38834998/article/det ...

  3. anaconda利用pip安装module

    开始_程序 中搜索:anaconda prompt (控制台) 输入pip 出现pip的一些信息,可以忽略 接着输入 pip install 模块名称 例如:pip install alphalens ...

  4. python 读取指定div的内容

    # -*- coding:utf-8 -*- from bs4 import BeautifulSoup import urllib.request import re # 如果是网址,可以用这个办法 ...

  5. Duplicate 复制数据库 搭建Dataguard

    1 操作系统环境 此处隐藏具体信息 System IP-address db_name db_version Comment         Target DB         Auxiliary D ...

  6. Python os.walk() 方法遍历文件目录

    概述 os.walk() 方法用于通过在目录树中游走输出在目录中的文件名,向上或者向下. os.walk() 方法是一个简单易用的文件.目录遍历器,可以帮助我们高效的处理文件.目录方面的事情. 在Un ...

  7. K/3 Cloud Web API接口说明文

    K/3 Cloud Web API接口说明文 目的 三方集成,提供第三方系统与Cloud集成调用接口. 技术实现 HTTP + Json 提供标准接口 编号 名称 说明 1 Kingdee.BOS.W ...

  8. The authenticity of host 'slaver2 (192.168.199.132)' can't be established. RSA key fingerprint is cc:4e:23:01:ca:97:52:21:85:78:bc:29:ca:b3:12:52.

    1:ssh登录 The authenticity of host 192.168.199.132 can't be established. 的问题 问题出现了,总要解决吧,百度一下,详细介绍的很多, ...

  9. 深入了解Cookie

    1.Cookie是什么 1.由于http是无状态的协议,一旦客户端和服务器的数据交换完毕,就会断开连接,再次请求,会重新连接,无法存储数据.2.Cookie的出现是为了下次链接时,你之前存储了哪些数据 ...

  10. [转] js在浏览器端对二进制流进行AES加密和解密

    开始解密 简单了解一下所用的的AES加密算法,我们用的是AES的CFB加密方式,服务端会提供给我一个key和iv的二进制字节串.密文也是二进制字节串. 我用的加密/解密插件: crypto-js 一般 ...