CODEWITHSUNDEEP
cssicons
Ivar
Ivar

Reputation: 796

Font icons twitching on hover

I have an issue that is occurring in Chrome in a theme I created, when I hover over an image the font icons on the page are moving around. I've looked around for a solution but I can't find anyone mentioning this. Take a look at the demo here and hover your mouse over the image in the second blog post.

This is the css rule for the hover event:

.entry-image a:hover img {
  -webkit-transform: scale(1.06);
  -moz-transform: scale(1.06);
  -ms-transform: scale(1.06);
  -o-transform: scale(1.06);
  transform: scale(1.06);
}

Thanks in advance, Ivar Rafn

Upvotes: 1

Views: 1445

Answers (2)

RobW
RobW

Reputation: 10611

I'm guessing you had a margin or position set with ems or rems. When an em or rem size resolves to a pixel value with decimal points (e.g., 17.100295px), hovers on nearby elements in Webkit and Blink can cause a little twitch.

Upvotes: 1

Ivar
Ivar

Reputation: 796

I fixed it.

I just had to add a css rule for the :before pseudo-element to have margin:0 and display:inline and that took care of the problem.

Upvotes: 0

Related Questions