css вращаться с переходом, похоже, влияет на непрозрачность других элементов?

Question

css вращаться с переходом, похоже, влияет на непрозрачность других элементов?

У меня есть эта проблема с поворотом DIV с преобразованиями CSS3 с использованием перехода 1s:

In Chrome 23 & Safari 6 on OSX 10.7.5 the font in the other containers gets slightly dimmed, during the .rotate-divs transition.

Любые идеи о том, что вызывает это и как его избежать?

http://jsfiddle.net/tTa5r/

.rotate{
  background: green;
  -moz-transition: all 1s ease;
  -webkit-transition: all 1s ease;
  -o-transition: all 1s ease;
  transition: all 1s ease;
}
.rotate.flip{
  -moz-transform: rotate(540deg);
  -webkit-transform: rotate(540deg);
  -o-transform: rotate(540deg);
  transform: rotate(540deg);
}

класс flip добавляется/удаляется с помощью jquery:

$('.rotate').on('click', function(){
  $(this).toggleClass('flip');
});

3

добавлено 28 Декабрь 2012 в 01:10 автор Max Girkens

Просмотры: 3

источник

nl ja de

Это аппаратное ускорение, и я не думаю, что вы можете это исправить. В моих случаях, когда я играю с -transform: масштаб (1.2) происходит одно и то же. Вот демонстрация. Ролловер в. Нормальном (средний): jsfiddle.net/ignaciocorreia/tTa5r/1

добавлено 28 Декабрь 2012 в 01:12, автор Ignacio Correia, источник

Это было бы для меня чем-то новым и очень интересным. Было бы здорово, если бы вы могли поделиться ссылкой.

добавлено 28 Декабрь 2012 в 01:23, автор Ignacio Correia, источник

Конечно. Я попытался в демо изменить на фиксированный и абсолютный, и это также происходит:/Мы CSS. Дайте мне знать, если вы когда-нибудь найдете ответ. Я сделаю то же самое.

добавлено 28 Декабрь 2012 в 01:26, автор Ignacio Correia, источник

ясно спасибо. странная вещь находится на веб-сайте, над которым я работаю, это не влияет на все остальные элементы, но только те, у которых CSS positione: relative ...

добавлено 28 Декабрь 2012 в 01:22, автор Max Girkens, источник

Поскольку это проект клиентов, к сожалению, я не смогу предоставить ссылку. Но я постараюсь поместить соответствующие части в скрипку.

добавлено 28 Декабрь 2012 в 01:25, автор Max Girkens, источник

3 ответы

Видеокурс по Java для начинающих

Получи видеокурс по Java для начинающих с упражнениями

Видеокурс "Создание приложений для Android"

Получи множество видеоуроков по Android сейчас

Система управления ссылками ReDirector 3.0

Автор: Евгений Попов

Свойство backface-visibility определяет, должен ли элемент быть видимым или нет, когда он обращен в сторону от экрана, обычно используется, когда вы «переворачиваете» и элемент.

В этом случае кажется, что он имеет тот же эффект, что и при добавлении:

-webkit-transform: translate3d(0,0,0);

Demo - http://jsfiddle.net/tTa5r/4/

который заставляет аппаратное ускорение давать вам немного более тонкий (сглаженный), но более последовательный рендеринг шрифтов до и после перехода.

Существует и третий вариант, и это необходимо добавить:

-webkit-font-smoothing: antialiased;

Demo - http://jsfiddle.net/tTa5r/3/

Я ответил на аналогичный вопрос, и @mddw опубликовал комментарий, связанный с сообщением в блоге, в котором описываются методы сглаживания, которые, по-видимому, являются причиной того, почему вы видите, что во время перехода и после него он отличается.

http://cantina.co/2012/05/ 18/мало-детали-субпиксель-против-серой шкале-антиалиасинга/

Надеюсь, это поможет!

1

добавлено 29 Декабрь 2012 в 11:15 автор Christofer Vilander

источник

он уверен, что :) Большое спасибо!

добавлено 29 Декабрь 2012 в 12:59, автор Max Girkens, источник

благодаря! -webkit-transform: translate3d (0,0,0); идеально подходит для моего использования!

добавлено 05 Ноября 2016 в 08:27, автор Daniela, источник

автор Laurence Cope · Answer 1 · 2013-03-08T12:51Z

-webkit-backface-visibility: hidden;

также работал для меня ... добавив его к элементам, которые я преобразовал

постскриптум Я бы проголосовал за предыдущий ответ, но я не могу, поскольку у меня нет достаточной «репутации», и я не вижу, как прокомментировать это

автор Max Girkens · Answer 2 · 2012-12-28T03:53Z

добавление

-webkit-backface-visibility: hidden;

to all affected elements, seems to help with that issue: http://jsfiddle.net/tTa5r/2/

while i'm not sure what this property excatly does it seems to do something to the font rendering: http://jsfiddle.net/tTa5r/ vs http://jsfiddle.net/tTa5r/2/

... не уверен, если мне это не нравится.

found here: iPhone WebKit CSS animations cause flicker