Why does transform: scale() blur SVG?

Question

css

So it goes.
I make an animation similar to this (look at the logo): tuborg0001.fallwinter.dk
In the example, transform changes with js, as an image - png
. For me, transform changes by changing classes, as an image - SVG
At the same time, in the example, the image increases without blur, everything is lathering - what's the trouble? How to avoid?

Answer 1

there is a gradual change. done through the sine wave formula. and all scale animation via js. and when animating through classes and transition - browser rendering is different. most likely because of this

Answer 2

The transform CSS properties are applied to the already rendered, i.e. raster image. SVG is first rasterized and then stretched with styles. This gives both pros (speed) and cons (soap).
This is one of the reasons why these properties cannot be thoughtlessly popped everywhere in a row, as some modern layout designers love to do.

Answer 3

so that svg does not wash - embed it in css code as base64

Answer 4

Judging by

please set date.timezone

You need to set the timezone, apparently in the database.

Answer 5

Check the password and login
try to connect in the console with your passwords and logins to MySQL