CODEWITHSUNDEEP
csslinear-gradients
kwiat1990
kwiat1990

Reputation: 489

CSS linear-gradient background-position bug in Chrome

I'm wondering if there is a workaround for linear-gradient background bug in Chrome.

On my last project I've used linear-gradient as background on buttons. On hover there was background-transition, which pushed a white backgroud and pulled a blue one in this place. Simple effect, achieved by setting background-size to 200% and then, on hover, by changing background-position.

In the code snippet below, at least on Chrome (in FF, Safari and IE there is no bug), you can see what I mean. This bug still exists and make blue part of the gradient visible (1px on the right side), while on hover this 1px is filled by the white part.

I observed that, e.g. when text-transform: uppercase isn't set, then there is no problem. On the other hand, using zoom tool in a browser, make on some breakpoints the gap visible and vice versa.

Could someone please explain to me this strange behaviour?

enter image description here

button {
  position: relative;
  padding: 10px 15px;
  background-color: #fff;
  background-image: linear-gradient(to left, #fff, #fff 50%, #003b7c 50%, #003b7c);
  background-size: 200% 100%;
  background-position: 100%;
  font-weight: bold;
  color: #003b7c;
  text-transform: uppercase;
  outline: none;
  border: 2px solid #003b7c;
  border-radius: 0;
  transition: .25s ease-in;
}

button:active,
button:focus {
  padding-top: 12px;
  padding-bottom: 8px;
}

button:hover {
  color: #fff;
  background-position: 0 0;
}
<button>Example button</button>

Upvotes: 1

Views: 2438

Answers (2)

MarkP
MarkP

Reputation: 2566

Change to this:

background-size: 250% 100%;


button {
  position: relative;
  padding: 10px 15px;
  background-color: #fff;
  background-image: linear-gradient(to left, #fff, #fff 50%, #003b7c 50%, #003b7c);
  background-size: 250% 100%;
  background-position: 100%;
  font-weight: bold;
  color: #003b7c;
  text-transform: uppercase;
  outline: none;
  border: 2px solid #003b7c;
  border-radius: 0;
  transition: .25s ease-in;
}

button:active,
button:focus {
  padding-top: 12px;
  padding-bottom: 8px;
}

button:hover {
  color: #fff;
  background-position: 0 0;
}
<button>Example button</button>

Upvotes: 3

Imanuel
Imanuel

Reputation: 3667

The reason is the gradient is repeated, and Chrome seems to render it differently (I haven't bothered to find out why).

To get rid of it, you simply need to add background-repeat: no-repeat;

button {
  position: relative;
  padding: 10px 15px;
  background-color: #fff;
  background-image: linear-gradient(to left, #fff, #fff 50%, #003b7c 50%, #003b7c);
  background-size: 200% 100%;
  background-position: 100%;
  background-repeat: no-repeat;
  font-weight: bold;
  color: #003b7c;
  text-transform: uppercase;
  outline: none;
  border: 2px solid #003b7c;
  border-radius: 0;
  transition: .25s ease-in;
}

button:active,
button:focus {
  padding-top: 12px;
  padding-bottom: 8px;
}

button:hover {
  color: #fff;
  background-position: 0 0;
}
<button>Example button</button>

Upvotes: 8

Related Questions