An element on a canvas jumps after the canvas itself is dragged

Question

As mentioned, an element on a canvas jumps after the canvas itself is dragged. I'm using -webkit-transform: translate(x,y) to drag the canvas around. Any ideas on what to look into for this problem?

You'll need to show the smallest code segment which reproduces the problem. Also, which browser are you using to test this? — andand, Jul 19 '12 at 15:42

score 0 · Answer 1 · edited May 23 '17 at 12:22

Look for changes that cause a reflow in CSS:

visibility:hidden/visible
display:none
:hover

and JavaScript:

offsetWidth or offsetHeight
scroll event

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.

Use browser specific selectors to target the document itself:

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

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

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

If you want to reference a child element based on its context, use the XML serialization of HTML5 and CSS3 namespaces:

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

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

If you want to display a child element based on a parent pseudo class, you can define the default state of the child element, then redefine it for each state change of the parent:

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

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

References

An element on a canvas jumps after the canvas itself is dragged

1 Answers1