backface-visibility не работает с элементами svg в Chrome - PullRequest
0 голосов
/ 05 июня 2019

Я пытаюсь реализовать эффект переворачивания карты и поэтому использую backface-visibility: hidden; для "перевернутых" элементов.Это работает для элементов HTML в Firefox и Chrome, а также для элементов SVG в Firefox.Тем не менее, он не работает для svg с Chrome.
В Chrome 180-градусные «перевернутые» элементы svg все еще видны, даже если задняя сторона видимости установлена ​​на скрытый.
Я также тестировал с / без transform-style: preserve-3d; и оба с -webkit префиксом

Минимальный пример:

HTML:

  <svg>
    <g class="flip">
      <rect id="svg-box1" width="100" height="50"/>
      <text x="10px" y="20px">
        Flip svg
      </text>
    </g>
  </svg>

  <div class="flip">
    <div id="div-box1">
      <p>Flip div</p>
    </div>
  </div>

CSS:

svg {
  overflow: visible;
  height: 50px;
  width: 300px;
}

.flip div {
  height: 50px;
  width: 100px;
  background: orange;
}

.flip p {
  padding: 10px;
}

rect {
  fill: orange;
}

.flip {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transform: rotateX(180deg);
  transform: rotateX(180deg);
}

Вот также JSFiddle: https://jsfiddle.net/nf4me6bd/

Справочная информация:

Я пытаюсь реализовать эффект переворачивания карты с помощью CSS.Я нашел много примеров, и я могу заставить работать базовую версию.Однако я бы хотел, чтобы моя «карточка» была перекошенной.Содержимое блоков очень размыто, когда я использую только элементы HTML с CSS (из-за перекоса преобразования и не перекоса содержимого блока).Поэтому я сейчас пытаюсь использовать элементы svg.

Система: Linux с Chrome версии 74.0 (64-разрядная версия) и Firefox 67.0 (64-разрядная версия)

Аналогичный вопрос

Существует этот вопрос от 2 лет назад, который в основном описывает ту же проблему (очевидно, с более старой версией Chrome).Поскольку на вопрос так и не был получен ответ, но он был задан для примера CodePen / JSFiddle, я решил задать свою версию вопроса с запрошенным JSFiddle.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...