可能的Chrome错误:如果页面的其余部分包含大量CSS，则在输入字段中键入内容的速度会非常慢 [英] Possible Chrome bug: Typing into input field is terribly slow if rest of page has heavy css

问题描述

我有一个页面，其中包含:

I have a page that consists of:

• 基本输入字段
• 大量样式繁多的dom元素

在输入字段中键入内容非常慢-会导致大量重新布局.

Typing in the input field is very slow -- it causes a lot of re-layouting.

Chrome开发者工具中的时间轴"标签表示仅重绘了输入字段.删除所有沉重的CSS可以使键入速度更快-布局要短得多.

The Timeline tab in the Chrome Dev Tools indicates that only the input field is redrawn. Removing all the heavy CSS makes the typing much faster -- the layout are much shorter.

没有道理:

• 输入字段在您输入时触发布局
• 即使检查员仅说输入字段已重新布局，该布局也依赖于其他页面元素.

受影响的浏览器:

• Linux上的Chrome测试版
• Android上的Chrome测试版

不受影响:

• Linux上的Firefox稳定版/测试版
• Android上的Firefox beta

这是一个jsbin ，出现了此问题

推荐答案

问题是我在页面上某些元素的CSS中强制执行此规则:

The issue was that I was forcing this rule in the css of some of the elements on the page:

-webkit-backface-visibility: hidden;

删除它会使版式更快(引人注目地短)

Removing it made the Layout much faster (unnoticeably short)

这篇关于可能的Chrome错误:如果页面的其余部分包含大量CSS，则在输入字段中键入内容的速度会非常慢的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！