Hello. Tell me, please, with the problem. There is a layout . There is a Download button. When you hover the arrow goes down. Chrome is okay. In the Opera too. And in Mozilla, there is a barely noticeable (literally 1px) offset of the arrow to the left, because of which a small jump occurs, and also the SVG becomes not so clear. Why can this happen?

  • Described the problems in Mozilla not found. - Igor
  • Recorded a video (especially seen at the moment when the arrow jumps up) - Alexander Belkevich

1 answer 1

The problem is that during animation, the browser changes the vector drawing mode from “beautiful” to “for animation”.

Solution 1

Specify the drawing mode specifically:

<svg ... shape-rendering="crispEdges" ... > ... </svg>

Solution 2

The icon needs to be redrawn.

Arrange svg elements strictly by pixels. Your document is simply full of fractional values:

enter image description here

If the numbers responsible for the horizontal and vertical lines are integers, the browser will not have problems with which pixel to assign it:

enter image description here

  • Solution 2 probably will not work, as the designer who drew this business will not rule everything, and these SVGs will be on the website .. And Solution 1 did not help, unfortunately .. - Alexander Belkevich
  • @AlexanderBelkevich, strangely, in FF 52 shape-rendering on your site solves the problem, check it out - Crantisz
  • joxi.ru/Vm6a010Hog8XrZ Nah , didn’t decide .. With shape-rendering, the arrows turn out to be narrow before you hover the button .. - Alexander Belkevich
  • @AlexanderBelkevich , Try other drawing modes - Crantisz
  • I tried. optimizeSpeed ​​quite disgustingly shows the edge's geometricPrecision makes it ragged ... well, auto by default .. - Alexander Belkevich