如前所述， Canvas 上的元素会在 Canvas 本身被拖动后跳动。我正在使用 -webkit-transform: translate(x,y) 来拖动 Canvas 。关于解决此问题的内容有什么想法吗？
最佳答案
在 CSS 中查找导致重排的更改:
- 可见性:隐藏/可见
- 显示:无
- :悬停
和 JavaScript:
- offsetWidth 或 offsetHeight
- 滚动事件
The sad truth about CSS3 selectors is that they really shouldn’t be used at all if you care about page performance. Decorating your markup with classes and ids and matching purely on those while avoiding all uses of sibling, descendant and child selectors will actually make a page perform significantly better in all browsers. With parent selectors it becomes extremely easy to accidentally cause a document-wide grovel. People can and will misuse this selector. Supporting it is giving people a whole lot of rope to hang themselves with.
The complete profile is appropriate for contexts which aren't extremely performance sensitive. For example, implementations of the Selectors API specification [SELECTORS-API] should use the ‘complete’ profile. It includes all of the selectors defined in this document.
CSS implementations conformant to Selectors Level 4 must use the ‘fast’ profile for CSS selection.
The fast profile is appropriate for use in any context, including dynamic browser CSS selector matching. It includes every selector defined in this document, except for:
Combinators within :matches(), :not(), :nth-match(), and :nth-last-match().
The reference combinator
The subject indicator
In particular, in the situation the browser is looking at most of the selectors it's considering don't match the element in question. So the problem becomes one of deciding that a selector doesn't match as fast as possible; if that requires a bit of extra work in the cases that do match you still win due to all the work you save in the cases that don't 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; }
引用资料
关于css - Canvas 上的元素在 Canvas 本身被拖动后跳动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/11563444/