Changing the mouse cursor for an entire page is sometimes necessary, and the only way I can find to do this is to change the styling of the body element. However with a complex document this can cause reflow for the entire page, so changing the mouse cursor this way can end up being a cause of serious jank!
To solve this:
- is there another way to change the cursor I’m not aware of?
- could browsers optimise specifically the cursor property to not cause reflow?
- perhaps there could be a new API like
window.setMouseCursor(style) which avoids touching styling?
Is there a reason why a reflow would be needed when the cursor changes? It seems to me that the shape of the cursor (by itself) should not influence the page.
1 Like
I think it’s pretty obvious a reflow is not necessary for a cursor change, but the problem is it’s implemented by setting a class/attribute on the body tag. So in order to optimise it the browser has to prove that class/attribute has no other effects on the document and that the same class/attribute is not referenced in any other rules applying to the document. This could be particularly tricky with some CSS selectors. So I guess it’s quite a complex optimisation to make for a specific case.
Would just setting document.body.style.cursor suffice? It gets the job done.
I agree this is something that should be possible to do very quickly. If this is slow in chromium, then please file a bug with a concrete repro (and ideally a trace) and reference it here, and I’ll try to get it to the right engineers to look at.
Hopefully no new API is necessary. But if implementing such an optimization is really difficult, then a new API may not be insane.