Violation Forced reflow while executing Javascript in console when tooltip appear on slider handle

Question

I have a web page with some elements and Ant.design slider. My slider values are controlled via React states. When the slider tooltip is turn on, the slider is very slow to react and in the console I see:

[Violation] Forced reflow while executing Javascript took ...

When the slider tooltip is turned off, the slider speed is back to normal; and the console message only appears when I hover the mouse over the slider handle (without moving the handle).

How can I fix this [Violation] Forced reflow error in tooltip? Thanks' in advance!

Phox

By any chance you are using imwheel? If yes, can you try disabling that and see if the violations are still there. – Glyphography

Answer 1

Slider with tooltip is a standard feature that normally works well, so chances are you have some performance issue in your code.

See the accepted answer to Violation Long running JavaScript task took xx ms for some useful tips on how to locate problems.

For more detailed help you need to post your code, preferably as an executable example.

Branch

Ok, but as I write above, messages appear also when I'm only point mouse over slider handle. My function, which is formate tooltip text is very simple and no other action with Dom produced. That is why I think that problem with tooltip is exists. – Phox