-преобразование: шкала, вызывающая «мерцание» при зависании - PullRequest
Новая
       27

-преобразование: шкала, вызывающая «мерцание» при зависании

28 голосов
/ 13 июня 2011

Я работаю над каталогом, который использует атрибут css -transform для масштабирования каждого «образца» при наведении.

Вот моя проблема: в некоторых браузерах и на определенных сайтах при наведении курсора на образцызаставляет страницу «мигать», когда вы переворачиваете их.Я также не могу решить эту проблему, на одном сайте это может быть уникально для Safari, на другом это может произойти только в Chrome, на другом это совершенно нормально.

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

Screenshot of catalog

.swatch {
  -webkit-box-shadow: #EFEFEF 2px 2px 0px;
  -webkit-transform: scale(1);
  -webkit-transition-duration: 0.2s;
  border: 1px solid white;
  position: relative;
  z-index: 1;

.swatch:hover {
  position:relative;
  z-index:10;
  transition-duration: 0.2s;
  transform:scale(1.8);
  -webkit-transition-duration: 0.2s;
  -webkit-transform:scale(1.8);
}

Также кажется, что проблема устранена при удалении любых атрибутов z-index, но тогда образец наведения находится позади других образцов;который не работает для этого проекта.

Любые мысли приветствуются.

Ответы [ 7 ]

25 голосов
/ 28 июня 2011

Мне удалось добавить 

-webkit-backface-visibility: hidden;

к нарушающему элементу (.swatch в вашем случае).

Однако, проверьте его в более старых версиях Chrome и Safariуверен, что больше ничего не сломается.По моему опыту, Safari 4 определенно не большой поклонник.

9 голосов
/ 21 ноября 2011

У меня была такая же проблема этим утром.Но я нашел ответ в Интернете несколько минут назад.

Чтобы предотвратить проблему с Blink, добавьте свойство follow в свой класс .swatch (не в :hover): 

-webkit-transform-style: preserve-3d;
1 голос
/ 24 мая 2012

когда мышь над изображениями (img: hover) в Chrome работает нормально.Вы можете использовать как это 

.swatch img:hover

http://dinolatoga.com/2009/09/18/amazing-imag-hover-effects-with-webkit-and-css/

1 голос
/ 24 июня 2011

Попробуйте изменить position:relative на position:absolute и / или указать атрибуты позиции (top: x, left: y.

Не знаю, сработает ли это, просто выбросить его туда.

0 голосов
/ 25 июня 2014

Я удалил эту строку из класса зависания: "display: none;"и удивительно, это сработало.Попробуйте и надеюсь, что это решит вашу проблему.

0 голосов
/ 22 августа 2013

На другой предмет у меня был тот же эффект (ужас мигает ).
Однако это было не по принципу парения. Это было на перетаскиваемой области, я хотел как можно более плавный на iPad . Область изначально была перемещена с помощью свойства css margin-left.
Затем я использовал -webkit-transform ':' translate3d (X, Y, Z) 'для плавного рендеринга, что имеет место.

НО, использование translation3d сделало знаменитое мигание при первом перетаскивании (только на iPad).

Благодаря Fábio ZC , -webkit-transform-style: preserve-3d; отлично работал, чтобы избавиться от моргания

Для тех, кто хочет узнать больше о стиле -webkit-transform: preserve-3d и о том, что с ним связано.


Возвращаясь к исходной проблеме, вот мои мысли:

  1. Вы упоминаете Safari & Chrome (так, webkit). Проблема только в тех браузерах? Что привело бы к -webkit подозрительным свойствам.

  2. Если это так, -webkit-backface-visibility: hidden; или -webkit-transform-style: preserve-3d; по-прежнему являются хорошими кандидатами для испытания:

  3. Вы прикрепили их в классе .swatch? (не в режиме наведения, в противном случае они будут считаться слишком запоздалыми, поскольку анимация будет воспроизводиться напрямую)

  4. Вы заявили, что вся страница мигает? Странно, так как это влияет только на образцы.

0 голосов
/ 09 августа 2012

У меня была такая же проблема, попробуйте использовать непрозрачность вместо z-index 

img:hover{
    opacity: 0;
}
...