Why does the Bulma CSS framwork change the z-index on hover?

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.

You need to sign in to view this answers