Question

如上所述，画布上的元素在拖动画布后会跳跃。我正在使用-webkit-transform：translate（x，y）来拖动画布。关于如何解决这个问题的任何想法？

Answer 1

查找导致CSS重排的更改：

能见度：隐藏/可见
显示：无
：悬停

和JavaScript：

offsetWidth或offsetHeight
滚动事件

关于CSS3选择器的可悲事实是，如果你关心页面性能，它们根本就不应该被使用。使用类和ID来装饰标记并完全匹配这些标记，同时避免使用兄弟，子孙和子选择器，这实际上会使页面在所有浏览器中都表现得更好。   使用父选择器，很容易意外地导致文档范围的grovel。人们可以并且将会滥用这个选择器。支持它给人们带来了很多绳索。

完整的配置文件适用于对性能不敏感的上下文。例如，Selectors API规范[SELECTORS-API]的实现应该使用'complete'配置文件。它包括本文档中定义的所有选择器。

符合Selectors Level 4的CSS实现必须使用'fast'配置文件进行CSS选择。

快速配置文件适合在任何上下文中使用，包括动态浏览器CSS选择器匹配。它包括本文档中定义的每个选择器，但：
除外
其中的组合：matches（），：not（），：nth-match（）和：nth-last-match（）。

参考组合器

主题指标

特别是，在这种情况下，浏览器正在查看大多数选择器，它正在考虑与所讨论的元素不匹配。所以问题就变成了决定选择器不尽可能快的问题;如果在匹配的情况下需要一些额外的工作，那么由于您在不匹配的情况下保存的所有工作，您仍然会获胜。

使用特定于浏览器的选择器来定位文档本身：

@-moz-document url-prefix() 
  {  
  @media all
    {
    .foo { color: red } /* Firefox */
    }
  }

*::-ms-backdrop, .foo { color: red } /* IE11 */

*:-webkit-any-link, .foo { color: red } /* Webkit */

如果要根据其上下文引用子元素，请使用HTML5和CSS3名称空间的XML序列化：

@namespace m "http://www.w3.org/1998/Math/MathML/";

m|math { border: 1px solid blue; }

如果要基于父伪类显示子元素，可以定义子元素的默认状态，然后为父元素的每个状态更改重新定义它：

li:hover > a * { display: none; }

li:hover > a:hover * { display: block; }

<强>参考

拖动画布后，画布上的元素会跳转

1 个答案: