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
nl ja de
Это аппаратное ускорение, и я не думаю, что вы можете это исправить. В моих случаях, когда я играю с -transform: масштаб (1.2) происходит одно и то же. Вот демонстрация. Ролловер в. Нормальном (средний): jsfiddle.net/ignaciocorreia/tTa5r/1
добавлено автор Ignacio Correia, источник
Это было бы для меня чем-то новым и очень интересным. Было бы здорово, если бы вы могли поделиться ссылкой.
добавлено автор Ignacio Correia, источник
Конечно. Я попытался в демо изменить на фиксированный и абсолютный, и это также происходит:/Мы CSS. Дайте мне знать, если вы когда-нибудь найдете ответ. Я сделаю то же самое.
добавлено автор Ignacio Correia, источник
ясно спасибо. странная вещь находится на веб-сайте, над которым я работаю, это не влияет на все остальные элементы, но только те, у которых CSS positione: relative ...
добавлено автор Max Girkens, источник
Поскольку это проект клиентов, к сожалению, я не смогу предоставить ссылку. Но я постараюсь поместить соответствующие части в скрипку.
добавлено автор Max Girkens, источник

3 ответы

-webkit-backface-visibility: hidden;

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

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

4
добавлено
вы можете подняться, как только вы собрали репутацию :-)
добавлено автор kleopatra, источник
Да, я знаю, но я не могу получить репутацию. Я должен добавить комментарии, подобные выше, для поддержки предыдущих решений. Это решение могло помочь многим людям, но никто не знает, потому что они не могут голосовать.
добавлено автор Laurence Cope, источник

добавление

-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

2
добавлено
Я нахожу это полезным, и -webkit-font-smoothing: antialiased ничего не делает на моем Chrome 24, ПК.
добавлено автор vsync, источник

Свойство 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
добавлено
он уверен, что :) Большое спасибо!
добавлено автор Max Girkens, источник
благодаря! -webkit-transform: translate3d (0,0,0); идеально подходит для моего использования!
добавлено автор Daniela, источник
JavaScript Jobs — чат
JavaScript Jobs — чат
8 336 участник(ов)

JavaScript Jobs — чат для поиска работы и людей Правила оформления: https://teletype.in/@telegram-ru/r1WQe5F1m См. также: @mobile_jobs, @devops_jobs, @nodejs_jobs, @react_js, @angular_ru, @js_ru

JavaScript.ru
JavaScript.ru
7 932 участник(ов)

Сообщество сайта JavaScript.ru в Slack.

pro.js
pro.js
4 675 участник(ов)

Про JavaScript и NodeJS Invite: https://t.me/joinchat/Be4rsT5Rsgq30DHutjxXgA Правила: http://telegra.ph/ru-chat-rules-06-19 Вакансии только с ЗП, не чаще раза в неделю.

Верстка сайтов HTML/CSS/JS/PHP
Верстка сайтов HTML/CSS/JS/PHP
3 439 участник(ов)

Правила группы: напишите !rules в чате. Группа Вк: vk.com/web_structure Freelancer: @web_fl Веб Дизайн: @dev_design Маркетолог: @topmarkening Автор: @M_Boroda

JavaScript — русскоговорящее сообщество
JavaScript — русскоговорящее сообщество
3 269 участник(ов)

Рекомендуем сразу отключить уведомления Правила: https://rudevs.network/ByaMH6un7 См. также: @js_noobs_ru, @nodejs_ru, @typescript_ru, @react_js, @electron_ru Вакансии и поиск работы: @javascript_jobs

JavaScript Noobs — сообщество новичков
JavaScript Noobs — сообщество новичков
2 484 участник(ов)

Чат для новичков

CSS — русскоговорящее сообщество
CSS — русскоговорящее сообщество
1 502 участник(ов)

Сообщество любителей CSS Возникли проблемы с CSS? – пиши сюда, обсудим и предложим самое лучшее решение Работа: @css_ru_jobs Правила: https://teletype.in/@css_ru/r1EWtQ2w7 Приходите в наши чаты @javascript_ru и @frontend_ru Флуд: @css_flood

Чат — Типичный Верстальщик
Чат — Типичный Верстальщик
1 080 участник(ов)

Основной канал: @tpverstak Обратная связь: @annblok Все ссылки на соц.сети проекта: http://taplink.cc/tpverstak ПРАВИЛА ЧАТА — https://teletype.in/@annblok/BygPgC3E7

javascript_ru
javascript_ru
915 участник(ов)

Сообщество любителей самого популярного языка программирования в мире. Чат основан в 2009 году. Логи: https://goo.gl/9EOeM7 Поддержка бота: @chat_linker (ссылка на репу внутри) Вам будут интересны @frontend_ru и @css_ru

jsChat
jsChat
603 участник(ов)

Чат посвященный программированию на языке javaScript Перед отправкой ссылки на Ваш контент посоветуйтесь с админом Все ссылки удаляются ботом автоматически

JavaScript for Zombies Chat
JavaScript for Zombies Chat
492 участник(ов)

Чат про JavaScript для настоящих zombie! Вход строго по приглашениям! Ссылка для строгих приглашений: https://t.me/joinchat/AAMBHz3Uyr0tuZ7VaB029g

All That JS
All That JS
417 участник(ов)

JS на русском

Веб-Технологи: UI/UX, Вёрстка, Фронтенд
Веб-Технологи: UI/UX, Вёрстка, Фронтенд
167 участник(ов)

Всё про веб-дизайн и вёрстку. А также: HTML, CSS, флекс и бутстрапы, шаблонизаторы, препроцессоры, методологии, аглифаеры, улучшаторы и обфускаторы. Обсуждаем темы юзабилити, устраиваем А/В тесты лендингов, и проводим аудит.

DTP :: @DTPublish
DTP :: @DTPublish
147 участник(ов)

Обсуждаемые темы: полиграфия, препресс, верстка, дизайн, иллюстрации, скрипты, плагины. Канал - @DTPublishing

css_jobs
css_jobs
26 участник(ов)

Чат для вопросов по css и html: @css_ru Флуд: @css_flood Канал с вакансиями и резюме: @css_jobs_feed

css_флуд
css_флуд
10 участник(ов)