25

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

enter image description here

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!

MeSo2
  • 450
  • 1
  • 7
  • 18
Evgeniy
  • 3,219
  • 5
  • 25
  • 40
  • By any chance you are using `imwheel`? If yes, can you try disabling that and see if the violations are still there. – zean_7 Jul 02 '21 at 14:33

1 Answers1

7

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.

Jesper We
  • 5,977
  • 2
  • 26
  • 40
  • 1
    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. – Evgeniy Feb 10 '18 at 16:02