Странные визуальные дефекты: парящие эффекты моих PNG. Некоторые показы это не так распространено - PullRequest
Новая
       16

Странные визуальные дефекты: парящие эффекты моих PNG. Некоторые показы это не так распространено

0 голосов
/ 15 июня 2019

При наведении PNG на элементы портфолио на моих веб-сайтах я заставляю их «всплывать» у пользователя, чтобы лучше видеть указанные элементы портфолио.Тем не менее, я заметил странную проблему с графикой / отображением (проиллюстрированные строки в этом посте imgur https://imgur.com/a/Oop8Ia1). Он присутствует, когда не зависает, но кажется, что он «оживает», когда я париваю.

Веб-сайтпример здесь: https://brodiedigital.io/#popup_sme

Я попытался изменить размеры вокруг PNG в фотошопе, удалив тени фотошопа и вместо этого отрисовав тени с помощью webkit-фильтра.

вот пример кода, которыйприменяется к определенному изображению: 

  &--p7 {

      position: absolute;
      margin: auto;
      width: 45%;
      top: 50%;
      left: 75%;
      transform: translate(-50%, -50%);
      -webkit-filter: drop-shadow(-6px 6px 6px #3c3c3c);
      @include respond(tab-port) {
        top: 60%;
      }
      @include respond(phone) {
        transform: translateX(-45%) translateY(-69%) rotate(7deg) skewX(-5deg) skewY(-7deg) scaleY(1.6) scaleX(1.4);
        pointer-events: none;
        top: 56%;
        left: 65%;
      }

      &:hover {


        transform: translateX(-49%) translateY(-69%) rotate(7deg) skewX(-5deg) skewY(-7deg) scaleY(1.8) scaleX(1.5);
        -webkit-filter: drop-shadow(-12px 12px 12px #3c3c3c);

        z-index: 20;

      }
    }

Я не получаю ошибку, только визуальный дефект, который выглядит невнятным.

Примечание: я ценю, что некоторые положения отключены - инамереваемся разобраться в этом, но пока что просто работаем над этим шабером:)

edit: это наблюдается в браузере Chrome

...