CSS Clip-path мерцает изображения в Google Chrome dev, текст и изображения становятся размытыми и смещенными во время анимации - PullRequest
Новая
       9

CSS Clip-path мерцает изображения в Google Chrome dev, текст и изображения становятся размытыми и смещенными во время анимации

0 голосов
/ 19 марта 2019

Вот страница, которую я сделал, и где эти проблемы возникают: http://archy -user.name /

CSS: http://archy -user.name /css / style.css

По сути, это веб-сайт, который я использую для практики / изучения материалов, связанных с веб-разработкой.

Все, с чем я работаю, входит в подпапки на этом сайте,что означает, что домашняя страница была пуста.Из-за этого я решил сделать эту новую домашнюю страницу, хотя и жестко закодированной, просто чтобы она не была пустой ...

Она технически завершена.

При кодировании сайта я использовал GoogleChrome Developer Edition для рендеринга страницы, и всего пару минут назад проверил, как она рендерилась в других браузерах.

PS: СТРАНИЦА ВЫСТУПАЕТ БЕСПЛАТНО, КАК ПРЕДНАЗНАЧЕНО, НА FIREFOX!

Есть две проблемы:

  1. При наведении курсора на круги возникает анимация удаления размытия и увеличения размера пути клипа.До добавления размытия в код он работал нормально (когда анимация покрывала только путь клипа).Теперь он работает «отлично», но границы изображения мерцают за пределами пути клипа в формате прямоугольника, как если бы не было пути клипа.Это мерцание состоит из «штрихов» или «контуров» изображения внутри круга.Если вы обратите внимание на мерцание, вы можете заметить, что «штрихи» находятся на изображении позади пути клипа. ЭТО ТОЛЬКО ПРОИСХОДИТ В РЕДАКТОРЕ РАЗРАБОТЧИКА GOOGLE CHROME : https://i.stack.imgur.com/UMJCE.png

  2. При наведении курсора на круги вокруг текста размытыми и смещенными на мгновение, прежде чем вернуться кнормально, происходит в обеих версиях Chrome, вот что я попытался сделать после некоторого исследования:

    • "transform: translateZ (0)": добавлен в круг, а круг "перед"псевдо-элемент.Он исправил размытый текст во время анимации, но смещает текст при фактическом наведении на него (анимация при наведении курсора на текст не смещается до добавления этой строки), а также заставляет кружки мерцать (в отличие от первой проблемы, это мерцание происходитвнутри фактического круга / пути клипа, тогда как предыдущая проблема возникает за пределами круга / пути клипа), добавление строки в текстовый класс ничего не меняет.

    • "backface-visibility ": Мерцает все круги, как и метод" transform ".

    • Также пытался применить сглаживание к тексту, ничего не изменилось.

Это то, что я пытался сделать до сих пор, хотя это было немного.

Хотя в моей защите не было никакого разнообразия в ответах отвопросы касательно расплывчатого текста / анимации, все ответы были о трех методах, которые я опробовал на всех, и ни один из них не соответствовал цели (те, которые работали, создавали другиеr проблема) ...

Если бы мне пришлось принять, я думаю, мне нужно было бы добавить "-webkit-" к некоторому элементу css, учитывая, что он отлично работает в Firefox, но не в Chrome... Проблема в том, что я не очень хорошо знаком с использованием префикса webkit, я не уверен, когда мне следует или не следует его использовать, и так как большинство методов работают без префиксов.

Вот какэлементы отформатированы: 

.container {
  margin-top: -50px;
}

.content {
  width: 1000px;
  height: 900px;
  position: relative;
}

.grid {
  display: grid;
  justify-items: center;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  font-family: 'Pacifico';
  font-size: 35px;
  text-shadow: 0px 0px 15px rgba(0, 0, 0, 0.5);
  font-weight: bold;
  color: white;
  grid-row-gap: 1rem;
  position: relative;
}

.proj {
  top: 35%;
  position: relative;
  color: rgba(255, 255, 255, 0.8);
  transition: 0.3s;
}

.proj:hover {
  color: crimson;
  outline: 3px rgba(255, 0, 255, 0.3) solid;
  background: rgba(216, 112, 147, 0.3);
  box-shadow: 2px 2px 4rem rgba(156, 5, 5, 0.1), 0px 0px 4rem rgba(156, 5, 5, 0.3), 0px 0px 5rem rgba(156, 5, 5, 0.3);
  -webkit-text-stroke: thin rgba(0, 0, 0, 0.4);
}

.circle_name {
  width: 285px;
  height: 285px;
  text-align: center;
  transition: 0.3s;
  clip-path: circle(40%);
  position: relative;
  cursor: pointer;
}

.circle_name::before {
  content: '';
  width: inherit;
  height: inherit;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  background: url('https://fillmurray.com/300/300');
  background-size: cover;
  filter: blur(10px);
  transition: 0.8s;
}

.circle_name:hover,
.circle_name:hover::before {
  filter: blur(0);
  -webkit-filter: blur(0);
  clip-path: circle(50%);
}
<div class="container">
  <div class="content">
    <div class="grid">
      <!-- ALL ITEMS GO HERE -->
      <div class="circle_name">
        <span class="proj">Circle Text</span>
      </div>
    </div>
  </div>
...