I am looking into rendering performance issues of my website and I have found that I get a lot of repaints while just moving the mouse pointer around.
Example: the HTML-Box below the input field and button get a repaint each time I move the mouse pointer (hovering only) between the input and the button in this page (from the official Bulma docs)
I am using the Bulma CSS framework with an "add-on"-arrangement on some elements. A deeper analysis has show that such buttons and inputs have their z-index changed on hover. The relevant scss code in Bulma is this:
From tools.scss:
.#{iv.$class-prefix}button,
.#{iv.$class-prefix}input,
.#{iv.$class-prefix}select select {
&:not([disabled]) {
&:hover,
&.#{iv.$class-prefix}is-hovered {
z-index: 2;
}
&:focus,
&.#{iv.$class-prefix}is-focused,
&:active,
&.#{iv.$class-prefix}is-active {
z-index: 3;
&:hover {
z-index: 4;
}
}
}
}
What is the logic behind such a z-index change on hover?
It's causing a ton of repaints on my quite complex website. Do other CSS frameworks have a similar function? I am tempted to remove/neuter these z-index changes.
Without the z-index hack, part of the prefix button border (in focus) will be covered by the input field, which look like this: