(Twitter) Bootstrap button input flickering on hover

Question

Scenario: Chrome v51.0.2704, Bootstrap v2.3.2, Windows 10 v1511. See snippet below. I've excluded the Bootstrap CSS that does not apply to this case.

Problem: As can be seen when rapidly moving the mouse on and off of the element, the background appears to randomly "flicker" with light blue horizontal lines appearing for just a moment.

This does not seem to occur on Firefox v46, IE v11, or Edge v25.

button,
input,
select,
textarea {
  margin: 0;
  font-size: 100%;
  vertical-align: middle;
}

button,
input {
  *overflow: visible;
  line-height: normal;
}

button::-moz-focus-inner,
input::-moz-focus-inner {
  padding: 0;
  border: 0;
}

button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
  cursor: pointer;
  -webkit-appearance: button;
}

label,
select,
button,
input[type="button"],
input[type="reset"],
input[type="submit"],
input[type="radio"],
input[type="checkbox"] {
  cursor: pointer;
}

label,
input,
button,
select,
textarea {
  font-size: 14px;
  font-weight: normal;
  line-height: 20px;
}

input,
button,
select,
textarea {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

input,
textarea,
.uneditable-input {
  width: 206px;
}

input[type="file"],
input[type="image"],
input[type="submit"],
input[type="reset"],
input[type="button"],
input[type="radio"],
input[type="checkbox"] {
  width: auto;
}

input:-moz-placeholder,
textarea:-moz-placeholder {
  color: #999999;
}

input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
  color: #999999;
}

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
  color: #999999;
}

input,
textarea,
.uneditable-input {
  margin-left: 0;
}

.btn {
  display: inline-block;
  *display: inline;
  padding: 4px 12px;
  margin-bottom: 0;
  *margin-left: .3em;
  font-size: 14px;
  line-height: 20px;
  color: #333333;
  text-align: center;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
  vertical-align: middle;
  cursor: pointer;
  background-color: #f5f5f5;
  *background-color: #e6e6e6;
  background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6));
  background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6);
  background-image: -o-linear-gradient(top, #ffffff, #e6e6e6);
  background-image: linear-gradient(to bottom, #ffffff, #e6e6e6);
  background-repeat: repeat-x;
  border: 1px solid #cccccc;
  *border: 0;
  border-color: #e6e6e6 #e6e6e6 #bfbfbf;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  border-bottom-color: #b3b3b3;
  -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
          border-radius: 4px;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe6e6e6', GradientType=0);
  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
  *zoom: 1;
  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
     -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
          box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
}

.btn:hover,
.btn:focus,
.btn:active,
.btn.active,
.btn.disabled,
.btn[disabled] {
  color: #333333;
  background-color: #e6e6e6;
  *background-color: #d9d9d9;
}

.btn:first-child {
  *margin-left: 0;
}

.btn:hover,
.btn:focus {
  color: #333333;
  text-decoration: none;
  background-position: 0 -15px;
  -webkit-transition: background-position 0.1s linear;
     -moz-transition: background-position 0.1s linear;
       -o-transition: background-position 0.1s linear;
          transition: background-position 0.1s linear;
}

.btn-large {
  padding: 11px 19px;
  font-size: 17.5px;
  -webkit-border-radius: 6px;
     -moz-border-radius: 6px;
          border-radius: 6px;
}

.btn-primary {
  color: #ffffff;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  background-color: #006dcc;
  *background-color: #0044cc;
  background-image: -moz-linear-gradient(top, #0088cc, #0044cc);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0044cc));
  background-image: -webkit-linear-gradient(top, #0088cc, #0044cc);
  background-image: -o-linear-gradient(top, #0088cc, #0044cc);
  background-image: linear-gradient(to bottom, #0088cc, #0044cc);
  background-repeat: repeat-x;
  border-color: #0044cc #0044cc #002a80;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0044cc', GradientType=0);
  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.btn-primary.disabled,
.btn-primary[disabled] {
  color: #ffffff;
  background-color: #0044cc;
  *background-color: #003bb3;
}

button.btn,
input[type="submit"].btn {
  *padding-top: 3px;
  *padding-bottom: 3px;
}

button.btn::-moz-focus-inner,
input[type="submit"].btn::-moz-focus-inner {
  padding: 0;
  border: 0;
}

button.btn.btn-large,
input[type="submit"].btn.btn-large {
  *padding-top: 7px;
  *padding-bottom: 7px;
}

<input type="submit" name="submit" class="btn btn-primary btn-lg">

as the transition is so fast (0.1 sec), we may prefer to remove this effect as it is not so sensible by user. specially this effect is not so necessary when hovering on buttons. So, we may remove that transition from .btn:hover, .btn:focus or overwrite it in our css: `.btn:hover, .btn:focus {transition-duration:0;}`. I know this is not real solution but if you test it you will see there is no significant difference! — S.Serpooshan, Oct 16 '16 at 07:47

score 5 · Accepted Answer · edited Jun 20 '20 at 09:12

Fiddle

The main issue here is that animating background-position can have bad performance.

Solution

Instead of animating the background-position I setup a separate div that is animated using transform: translateY(-15px).

Why so many `div`s?

You might think to reduce the number of divs by just using <button></button> and animating :after with a transform animation, but Chrome has a bug that doesn't allow you to have transition, overflow: hidden, and border-radiusapplied correctly to an element (covered in this SO question).

Why use `transform`?

To help experience what's going check out the following JSFiddles:

(Zooming in really helps)

More Obvious Flicker - the original flicker from this question can be difficult to spot because the animation only takes 0.1s so I slowed it down to 3s
Color Contrast - changing the colors from variants of blue can help show why there is a jitter in the animation. With this example you can see that just before the red portion moves up on the button there is a sliver of yellow. This is my guess as to why you see the white flicker in the original question.
Fix (with color) - in this example you can clearly see that the animation is moving smoothly because of using transform: translateY(-15px)
Final Answer - this restores the original colors and animation speed

Full Code

button,
input,
select,
textarea {
  margin: 0;
  font-size: 100%;
  vertical-align: middle;
}

button,
input {
  *overflow: visible;
  line-height: normal;
}

button::-moz-focus-inner,
input::-moz-focus-inner {
  padding: 0;
  border: 0;
}

button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
  cursor: pointer;
  -webkit-appearance: button;
}

label,
select,
button,
input[type="button"],
input[type="reset"],
input[type="submit"],
input[type="radio"],
input[type="checkbox"] {
  cursor: pointer;
}

label,
input,
button,
select,
textarea {
  font-size: 14px;
  font-weight: normal;
  line-height: 20px;
}

input,
button,
select,
textarea {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

input,
textarea,
.uneditable-input {
  width: 206px;
}

input[type="file"],
input[type="image"],
input[type="submit"],
input[type="reset"],
input[type="button"],
input[type="radio"],
input[type="checkbox"] {
  width: auto;
}

input:-moz-placeholder,
textarea:-moz-placeholder {
  color: #999999;
}

input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
  color: #999999;
}

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
  color: #999999;
}

input,
textarea,
.uneditable-input {
  margin-left: 0;
}




.btn {
  display: inline-block;
  *display: inline;
  padding: 4px 12px;
  margin-bottom: 0;
  *margin-left: .3em;
  font-size: 14px;
  line-height: 20px;
  color: #333333;
  text-align: center;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
  vertical-align: middle;
  cursor: pointer;
  /*
  background-color: #f5f5f5;
  *background-color: #e6e6e6;
  background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6));
  background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6);
  background-image: -o-linear-gradient(top, #ffffff, #e6e6e6);
  background-image: linear-gradient(to bottom, #ffffff, #e6e6e6);
  background-repeat: repeat-x;
  */
  border: 1px solid #cccccc;
  *border: 0;
  border-color: #e6e6e6 #e6e6e6 #bfbfbf;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  border-bottom-color: #b3b3b3;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe6e6e6', GradientType=0);
  filter: progid: DXImageTransform.Microsoft.gradient(enabled=false);
  *zoom: 1;
  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
  -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
}

.btn:hover,
.btn:focus,
.btn:active,
.btn.active,
.btn.disabled,
.btn[disabled] {
  color: #333333;
  /*
  background-color: #e6e6e6;
  *background-color: #d9d9d9;
  */
}

.btn:first-child {
  *margin-left: 0;
}

.btn:hover,
.btn:focus {
  color: #333333;
  text-decoration: none;
  /* Removed
  background-position: 0 -15px;
  -webkit-transition: background-position 3s linear;
     -moz-transition: background-position 3s linear;
       -o-transition: background-position 3s linear;
          transition: background-position 3s linear;
   */
}

.btn-large {
  padding: 11px 19px;
  font-size: 17.5px;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
}

.btn-primary {
  color: #ffffff;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  /*
  background-color: #006dcc;
  *background-color: #0044cc;
  background-image: -moz-linear-gradient(top, #0088cc, #0044cc);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0044cc));
  background-image: -webkit-linear-gradient(top, #0088cc, #0044cc);
  background-image: -o-linear-gradient(top, #0088cc, #0044cc);
  background-image: linear-gradient(to bottom, #0088cc, #0044cc);
  background-repeat: repeat-x;
  */
  border-color: #0044cc #0044cc #002a80;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0044cc', GradientType=0);
  filter: progid: DXImageTransform.Microsoft.gradient(enabled=false);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.btn-primary.disabled,
.btn-primary[disabled] {
  color: #ffffff;
  /*background-color: #0044cc;
  *background-color: #003bb3;
  */
}

button.btn,
input[type="submit"].btn {
  *padding-top: 3px;
  *padding-bottom: 3px;
}

button.btn::-moz-focus-inner,
input[type="submit"].btn::-moz-focus-inner {
  padding: 0;
  border: 0;
}

button.btn.btn-large,
input[type="submit"].btn.btn-large {
  *padding-top: 7px;
  *padding-bottom: 7px;
}


/* New Styles  */
.btn-container {
  overflow: hidden;
  display: inline-block;
  position: relative;
}

.background {
  content: "";
  background-color: #0044cc;
  position: absolute;
  bottom: -15px;
  left: 0;
  right: 0;
  width: 100%;
  height: 45px;
  z-index: -1;
  background-image: linear-gradient(to bottom, #0088cc 0%, #0044cc 66%, #0044cc 66%, #0044cc 100%);
  background-repeat: repeat-x;
}

.btn-container:hover .background {
  transform: translateY(-15px);
  -webkit-transition: transform 0.1s linear;
  -moz-transition: transform 0.1s linear;
  -o-transition: transform 0.1s linear;
  transition: transform 0.1s linear;
}

.btn {
  background-color: transparent;
}

.mask {
  position: absolute;
  margin: 0 auto;
  overflow: hidden;
  height: 30px;
  z-index: 9;
  top: 0px;
  left: 0;
  right: 0;
  width: 100%;
}

.mask:after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  border-radius: 4px;
  width: 100%;
  height: 100%;
  box-shadow: 0px 0px 0px 2000px #f3f5f6;
}

<div class="btn-container">
  <button class="btn btn-primary btn-lg">
    Submit
  </button>
  <div class="mask">
  </div>
  <div class="background">
  </div>
</div>

That was a much more full and educational explanation than I expected. You not only explained the what but also the _why_. Thank you! — PaulC, Jul 12 '16 at 00:48

score 2 · Answer 2 · answered Jul 08 '16 at 01:17

2

The problem is the background-position on hover. Reducing the second value should fix the flickering (any value from -8px to -14px should work):

.btn:hover,
.btn:focus {
  background-position: 0 -14px;
}

answered Jul 08 '16 at 01:17

Jack Ducasse

479
1
4
9

i found that many other values instead of default -15px will also work! to get darker bkg on hover we may also use for example: `.btn:hover, .btn:focus {background-position: 0 -18px;}` or `... background-position: 0 -25px;` – S.Serpooshan Oct 16 '16 at 07:17

(Twitter) Bootstrap button input flickering on hover

2 Answers2

Fiddle

Solution

Why so many divs?

Why use transform?

Full Code

Why so many `div`s?

Why use `transform`?