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

javascript reactjs antd
Evgeniy picture Evgeniy · Feb 8, 2018 · Viewed 33.7k times · Source

I have a web page with some elements and Ant.design slider present too. Slider values is controlled by React state. When slider tooltip is turn on, slider is very slow down and in console I see a message [Violation] Forced reflow while executig Javascript took ....

enter image description here

When slider tooltip is turn off, slider speed becomes normal. Message is appear in console also if I'am only point a mouse on slider handle (without moving handle).

How can I fix bad behaviour with tooltip? Thank's in advance!

Answer

Jesper We picture Jesper We · Feb 10, 2018

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.

Related questions

How to customize Ant.design styles

Who knows how to customize Ant.design styles in proper way? For example, I want to change the default backgroundColor and height of Header section: import React, { Component } from 'react'; import { Form, Layout } from 'antd'; const { Header, Footer, Sider, Content } = …

Read More
how to get field value on change for FormItem in antd

I am having a hard time with antd's form. I have this select field in this form and I want to get the value from it onChange but somehow not getting it to work properly. say this is the item …

Read More
React | Ant design select default value

I'm using ant design in my project. Here I have a select as a dynamic field. when I trying to set default value for select. It doesn't work. <Select defaultValue="lucy"> <Option value="jack">Jack</…

Read More