Column headers flickering on click

Gantt
#1

I have an issue where clicking on any column headers in the grid causes “flickering” for less than a second. Only the selected column header and the columns to it’s right side start flickering (columns on the left remain static for some reason).

Imgur link to what this looks like - https://imgur.com/a/sLHf0pj
Note: In the above video, I click on each column header multiple times, hence the repeated flickering.

Currently I have added the CSS property -
.gantt_grid_head_cell:focus {
display: none;
box-shadow: 0 0 0 0;
}
In order to override the default box-shadow. But this seems to cause the flickering in question.

Removing my CSS property, the result is what I assume is the default behaviour-
https://imgur.com/a/GVL88v4

I would like for nothing to happen when I click on any column header. However, column resizing should work as normal.

#2

Hello Mihir,
Probably, there is some conflict when adding the styles and removing them. It seems to be a rendering issue of Chrome and Chromium-based browsers as I cannot reproduce that issue in Firefox.

If I comment the display: none; style rule, I don’t see flickering.
Here is the snippet:
https://snippet.dhtmlx.com/5y4fpk7i

#3

Thanks Ramil. Removing the display property got rid of the flickering.
Also adding for anyone else, setting outline: none; removed the orange borders in the cell after clicking the column header.