Текст исчезает / невидим в MS Edge при прокрутке / загрузке страницы / изменении размера - PullRequest
Новая
       16

Текст исчезает / невидим в MS Edge при прокрутке / загрузке страницы / изменении размера

0 голосов
/ 21 апреля 2020

Один из моих сайтов показывает странное поведение в MS Edge. Текст только видимый / появляется, если я наведите курсор / выберите текст. При изменении размера окна или прокрутке текст снова исчезает.

Возможно, проблема связана с CSS Поворотом. Текст исчезает только на наклонных участках. В этих разделах внешний контейнер вращается на 2 градуса, а внутренний контейнер (где размещается содержимое) поворачивается на -2 градуса.

Демонстрация ошибок

Кажется, что фигура с Переполнение скрыто, за которым следует текстовый контейнер, вызывает эту ошибку в повернутых секциях

HTML: 

<div class="rotate">
    <div class="wrapper">
      <div class="image">
        <figure><img src="https://dummyimage.com/120x120/8492e0/fff" alt="dummy"></figure>
      </div>
      <div class="text">
        <p>Lorem <br>ipsum</p>
      </div>
  </div>
</div>

CSS: 

.rotate{
  overflow: hidden;
  background: #e6e6e6;
  color: #000;
  background-color: #ccc;
  transform-origin: left center;
  transform: rotate(2deg);
}

.wrapper{
  transform: rotate(-2deg);
}

figure{overflow: hidden}

.image{
    float: left;
}

https://codepen.io/biwer-r/pen/gOaLGMg

...