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!

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!

• javascript
• reactjs
• antd
• jquery-ui-tooltip

• By any chance you are using imwheel? If yes, can you try disabling that and see if the violations are still there. – zean_7 Commented Jul 2, 2021 at 14:33

1 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.