Блог

Главная - Вопросы по программированию - Преобразование родителя svg вызывает размытие — firefox

Преобразование родителя svg вызывает размытие — firefox

#svg #firefox #transform #blur

Вопрос:

Когда я делаю откидную карту и вставляю (спереди и сзади) один и тот же svg-код после поворота svg на задней карте, дисплей размыт (при увеличении). Пример ниже. Я хотел бы добавить, что проблема касается только браузера firefox (Microsoft Edge, Opera — они работают правильно). Конечно, я хочу иметь четкий svg на обеих боковых картах.

Есть какие-нибудь мысли?

 var front = document.querySelector('.flip-card-front');
var back = document.querySelector('.flip-card-back');
var innner = document.querySelector('.flip-card-inner');


front.addEventListener( 'click', function() {
  innner.classList.toggle("flip-card-cl");
});

back.addEventListener( 'click', function() {
  innner.classList.toggle("flip-card-cl");
}); 
 body {
  font-family: Arial, Helvetica, sans-serif;
}

.flip-card {
  background-color: transparent;
  width: 300px;
  height: 300px;
  perspective: 1000px;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}

.flip-card-cl {
  transform: rotateY(180deg);
}

.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.flip-card-front {
  background-color: #bbb;
  color: black;
}

.flip-card-back {
  background-color: #2980b9;
  color: white;
  transform: rotateY(180deg);
} 
 <!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">

</head>
<body>
<div>Click card to rotate</div><br>
<div class="flip-card">
  <div class="flip-card-inner">
    <div class="flip-card-front">
      <p>SHARP</p>
      <svg height="210" width="500">
  <polygon points="100,10 40,198 190,78 10,78 160,198" style="fill:lime;stroke:purple;stroke-width:5;fill-rule:nonzero;"/>
  Sorry, your browser does not support inline SVG.
</svg>
    </div>
    <div class="flip-card-back">
      <p>BLUR</p>
      <svg height="210" width="500">
  <polygon points="100,10 40,198 190,78 10,78 160,198" style="fill:lime;stroke:purple;stroke-width:5;fill-rule:nonzero;"/>
  Sorry, your browser does not support inline SVG.
</svg>
    </div>
  </div>
</div>

</body>
</html>

Я могу видеть это после увеличения:

передняя сторона — острая

задняя сторона — размытие

Комментарии:

1. Когда я запускаю ваш фрагмент в Windows 10 и увеличиваю масштаб страницы, я не вижу никакого размытия. Он все еще острый. Можете ли вы добавить несколько шагов для воспроизведения?

2. Просто нажмите на карточку, затем поверните ее, а затем снова увеличьте масштаб страницы.

3. Нажмите на карту, чтобы повернуть, затем увеличьте масштаб ==> Для меня это остро.

4. в браузере firefox ?

5. Это отлично работает для меня в FF. Пожалуйста, попробуйте это: используйте поле просмотра без ширины и высоты для элемента svg: <svg viewBox="0 0 200 208"> При этом svg займет всю доступную ширину,т. е. ширину .flip-card-whatever

Метки: