CSS Преобразование масштаба анимации начинается размыто в Firefox - PullRequest
Новая
       119

CSS Преобразование масштаба анимации начинается размыто в Firefox

0 голосов
/ 22 марта 2020

Я пытаюсь анимировать эффект уменьшения масштаба на SVG. Я получил это работает, , но первый кадр, который масштабируется до 30, размыт / пикселизирован в firefox.

Firefox: размыто

Chrome: crisp

Я не вижу той же проблемы в chrome или edge. Начальный кадр четкий, как и следовало ожидать, будучи SVG. 

html,
body {
  margin: 0px;
  padding: 0px;
}
.wrapper {
  padding: 50px 50px;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 80px;
}
.img_zoom {
  width: 400px;
  height: 500px;
  margin: 2em auto 2em auto;
  overflow: hidden;
}

.zoom {
  width: 100%;
  height: 100%;
  background-position: center;
  background-size: cover;

  animation: zoom 5s ease-in-out 4s 1 normal forwards;

  transform: translate(3400px, -3600px) scale(30);
}

@keyframes zoom {
  to {
    margin-left: 0;
    transform: translate(0px, 0px) scale(0.7);
  }
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="styles.css">
</head>

<body>
  <div class="wrapper">
    <div class="img_zoom">
      <div class="zoom"><img src="https://flexion.tech/images/box-con.svg" alt=""></div>

    </div>
  </div>
</body>

</html>

Код ручка здесь для обзора:

https://codepen.io/jaffa80/pen/KKpxgeQ

Любые идеи, как я можно исправить проблему с размытостью в firefox?

Другая проблема, с которой я столкнулся, - это если я удалил margin-left: 0 из @keyframe to, все перестало работать. Любые указатели на это также будут оценены.

Спасибо

...