CODEWITHSUNDEEP
htmlcsssafari
Koji NAKAMURA
Koji NAKAMURA

Reputation: 43

is it bug of border-radius in Safari?

In Safari, an applying a :hover style causes incorrect repainting. Is it bug in Safari?

enter image description here

a:hover {
  text-decoration: none;
}

.outer {
  width: 300px;
  border: 3px solid red;
  border-radius: 30px;
  overflow: hidden;
}

.inner {
  display: block;
  width: 100%;
  height: 100%;
  background: yellow;
}
<div class="outer">
  <a href="javascript:void 0" class="inner">hello</a>
</div>

jsfiddle: https://jsfiddle.net/z71z5jov/

Upvotes: 1

Views: 1326

Answers (1)

Kaiido
Kaiido

Reputation: 136638

Yes, this is a bug and I believe it to be big enough so that they will notice shortly, but nevertheless, you might want to open an issue on their issue tracker if no dupe has been opened yet.

Just a note before the hacks: this not only happens when hovered, even triggering the repaint by js does reproduce the issue, and not only on <a> elements either and even weirder, it fixes by itself after some time.

So now, the hackish workaround:

Setting a transparent border on your inner element seems to prevent the bug...

a:hover {
  text-decoration: none;
}

.outer {
  width: 300px;
  border: 3px solid red;
  border-radius: 30px;
  overflow: hidden;
}

.inner {
  display: block;
  width: 100%;
  height: 100%;
  background: yellow;
  border: solid 1px transparent; /* Safari workaround */
  margin: -1px; /* counter-act the workaround */
}
<div class="outer">
  <a href="javascript:void 0" class="inner">hello</a>
</div>

Upvotes: 1

Related Questions