L
L
lavezzi12016-03-17 08:22:03
css
lavezzi1, 2016-03-17 08:22:03

Why is svg icon blinking in chrome?

Here is the icon, you need to absolutely position it in the center. It looks bad in chrome, and if you add translateZ (0) - it blurs a lot. And in FF it looks clear. What to do?
codepen.io/anon/pen/ZWLLWv?editors=1100

Answer the question

In order to leave comments, you need to log in

1 answer(s)
M
Maxim Gatilin, 2016-03-17
@gatilin222

The thing is, your icon is 25 by 25 pixels. You offset the element by 50%. What happens in this case? That's right, the browser offsets the icon by 12 and a half pixels. Different browsers render half a pixel differently, so the icon in chrome is blurry, for example. Here is a working example with negative margins and an even icon size.
Everything will be much easier if you use icon fonts or svg sprites .

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question