Хром не отражает часть текста

Question

Хром не отражает часть текста

Рейтинг: 1Ответов: 1Опубликовано: 25.06.2023

Есть код, в котором на div с фоновым изображением наложен прозрачный текст (color: transparent. Последние две буквы текста обернуты в отдельные дивы и отражены по горизонтали (transform: scaleX(-1)).

В Файрфоксе все работает хорошо, но Хром упорно отказывается показывать эти две последние буквы.

Может, кто-нибудь знает, в чем проблема и как ее решить?

.wrap {
  display: inline-block;
  width: 100vw;
  height: 100vh;
  background-image: linear-gradient(45deg, rgba(84, 53, 65, 1) 0%, rgba(174, 138, 134, 1) 50%, rgba(95, 159, 205, 1) 100%);
}

.inner {
  width: 70vw;
  margin: auto;
  margin-top: 30vh;
  text-align: center;
  background: url(https://i1.wp.com/i.pinimg.com/originals/b1/53/1b/b1531b8d7df182324d8abc70496168f0.jpg);
  font-size: 10vw;
  font-family: Mulish;
  color: transparent;
  -webkit-background-clip: text;
  flex-flow: row nowrap;
  display: flex;
  justify-content: space-between;
}

.reversed-text {
  transform: scaleX(-1);
  ;
}

.text-line-one,
.reversed-text {
  display: inline-block;
}

<div class="container-fluid">
  <div class="row">
    <div class="wrap">
      <div class="inner">
        <div class="text-line-one">ART GLASS VER
          <div class="reversed-text">R</div>
          <div class="reversed-text">E</div>
        </div>
      </div>
    </div>
  </div>
</div>

css html inline-block

Источник: Stack Overflow на русском

Answer 1

▲ 2

Вопрос снят, на соседнем форуме подсказали, что это баг Хромиума и предложили для его обхадо использовать символы "Я" и "Ǝ".

Хром не отражает часть текста

Ответы