0

I have a problem doing pixel-perfect center icon inside colored block with round edges. Icon changes left-right offset on browser window resize.

Open for example Chrome or Safari with https://github.com/facebook/react

And try to resize width of browser window very slowly (by pixel).

You will see a little changes (1-2px) in offset between icons and it's titles in buttons (Watch, Star, Fork).

The same happens with icon inside colored block with round edges.

Why it happens? And how to prevent it?

p.s. Initially, I ran into this problem developing a electron app, but it appears everywhere.

p.p.s. May be there is any webkit option to change rendering method, that will prevent such trembling on resize?

Sorge Selo
  • 1
  • 1

1 Answers1

0

Problem solves by adding

transform: translate3d(0px,0px, 0px);

to icon styles

but it slows rendering on page scrolling :(

Sorge Selo
  • 1
  • 1