Button flickers when mouse is right at the top or bottom edge

[dimitris-athanasiou]

Using chrome I noticed that if I hover my mouse on the edge of the top or bottom of any EUI button the button start flickering: alternating between the hovered/non-hovered rendering.

An example would be the Filled button in https://elastic.github.io/eui/#/guidelines/buttons

[snide]

This is due to the animation transform (where the button moves UP one pixel, then back down). I'm not sure it's something I can solve without removing the animation. Given the choice between people noticing a glitch if they keep their mouse in the same place on a 1px hitbox and having no animation, I think I'm OK with sticking with the animation.

I see this happening on other big sites (here's Stripe.com) who use the same technique.

[cchaos]

The only way I can think of to get around this is to add another containing element to the EuiButton that handles the styling instead of applying it to the outermost (clickable) element. That way when you transform that second layer it doesn't affect the hit area of the clickable element.

I.E:

.euiButton {
  cursor: pointer; /* just handles the click events */

  > .euiButton-styles {
    background-color: blue;  /* this layer gets all the styling associated with the button */
    transform: translate(0,0); /* as well as the transforms */
  }
}

[cchaos]

POC: https://codepen.io/clhorn99/pen/mxrOqv

[snide]

@cchaos Only negative I can see with that type of solution is that it makes the pure CSS harder to use. But we already have the content stuff in there, so it's really no worse than it already is. I'm OK with it if you are.

[cchaos]

Yeah I was really more just testing my own theory. I'm on the fence about implementing it since it is a big change to the button styling for a very edge case.

[snide]

Closing this issue as part of my weekly sweep. Think this one is small enough we can trade the minor aggravation for ease of use.