前段时间发现一个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. 【Java】「深入理解Java虚拟机」学习笔记（2）- JVM内存区域

    一.运行时数据区 JVM在执行Java程序的时候,将其运行时数据区划分为若干不同区域.它们的用途和创建及销毁的时间不同. 1.程序计数器(Program Counter Register) 是一块很小 ...

  2. nginx实践(五)之代理服务(正向代理与反向代理介绍)

    正向代理 正向代理代理是为客户端服务,代理负责DNS解析域名到对应ip,并进行访问服务端,返回响应给客户端 反向代理 客户端自己负责请求DNS解析域名到对应ip,服务端通过代理分发流量,进行负载均衡 ...

  3. flask 初学1

    py 文件中 from flask import Flask,redirect,request,url_for,jsonifyfrom Flask_5.config import Config fro ...

  4. hiho1460 rmq模板题

    好久没做rmq的题了,今天写了一遍,感觉打表有点像区间dp /* 给定长为n的字符串,要求在字符串中选择k个字符, 选择的子系列字典序最小 因为选择k个字符,那么就是去掉n-k个字符 那么[1,n-k ...

  5. 第三周学习总结-Java

    2018年7月29日 这是暑假第三周.这一周我把找到的Java教学视频看完了. 本周学到了Java剩余的基础知识,比如:抽象类.接口.内部类.几种常用类.IO流.多态.多线程等等. 因为没有书,所以我 ...

  6. Python中的函数介绍

    调用函数 python中有很多内置函数,我们可以直接调用,内置函数能直接在官网查看:https://docs.python.org/3/library/functions.html#abs 定义函数 ...

  7. springboot集成druid+mybatis连接oracle数据库

    2.1.配置 druid 数据源 2. 随后要进行druid 的数据源的配置,如果要想使用druid 的数据源,那么首先一定要去修改 pom.xml 配置文件,引入以下包: oracle官网下载 oj ...

  8. 关于js渲染网页时爬取数据的思路和全过程（附源码）

    于js渲染网页时爬取数据的思路 首先可以先去用requests库访问url来测试一下能不能拿到数据,如果能拿到那么就是一个普通的网页,如果出现403类的错误代码可以在requests.get()方法里 ...

  9. 51 Nod 1256 乘法逆元(数论：拓展欧几里得）

    1256 乘法逆元  基准时间限制:1 秒 空间限制:131072 KB 分值: 0 难度:基础题  收藏  关注 给出2个数M和N(M < N),且M与N互质,找出一个数K满足0 < K ...

  10. 有道词典Linux版下载安装

    http://cidian.youdao.com/index-linux.html Ubuntu http://codown.youdao.com/cidian/linux/youdao-dict_1 ...