-transform: масштаб, вызывающий "мигание" при зависании

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

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

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

.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, но затем образец зависания находится за другими образцами; который не работает для этого проекта.

Любые мысли оцениваются.

Ответы

Ответ 1

У меня был успех, добавив

-webkit-backface-visibility: hidden;

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

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

Ответ 2

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

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

-webkit-transform-style: preserve-3d;

Ответ 3

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

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

Ответ 4

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

.swatch img:hover

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

Ответ 5

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

img:hover{
    opacity: 0;
}

Ответ 6

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

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

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

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

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

Вы указываете Safari и Chrome (так, webkit). Проблема только в том браузере? Который привел бы к -webkit подозрительным свойствам.
Если это так, -webkit-backface-visibility: hidden; или -webkit-transform-style: preserve-3d; все еще хорошие кандидаты пробовал:
Вы прикрепляли их к классу .swatch? (не зависание, иначе они будут считаться слишком поздними, так как анимация будет воспроизводиться напрямую)
Вы заявили, что вся страница мигает? Странно, так как на него должны воздействовать только образцы.

Ответ 7

воля-изменение: трансформация; /* Это работает */

Ответ 8

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