Переход непрозрачности CSS не работает в элементе двойного поворота

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

Итак, у меня есть div с rotate (45deg). В этом div у меня есть два div другого div в встроенном блоке (с поворотом css (-45deg). Слева у меня есть ползунок, а справа текст и ярлыки. Сегодня я присоединился к ползунок в левое положение (я работаю на joomla). Работает хорошо, но у меня проблема с переходом слайдов. Если я нажимаю «Далее» или «Предыдущий», глобальный div (основной контейнер) становится размытым< /strong> на время перехода я сделал скриншоты текста в нужном месте (лучше видно разницу).

Скрипка, например:

http://jsfiddle.net/asakuras/8Pk3S/11/

Например, фото:

Перед кликом и сразу после клика во время перехода:

http://www.morgann-c.com/tools/js/bug.jpgвведите здесь описание изображения

Пояснения:

Я проверил много возможностей, чтобы очистить это, но в настоящее время нет решения. В скрипте (responsiveslides.js) переходы уменьшаются за счет непрозрачности. В строке 71 скрипта есть конфигурация непрозрачности:

visible = {"float": "left", "position": "relative", "opacity": 1, "zIndex": 2},
hidden = {"float": "none", "position": "absolute", "opacity": 0, "zIndex": 1, }

Если я изменю непрозрачность скрытого класса на 0, перехода не будет, но ошибка исчезнет! Я думаю, что это проблема с переходом непрозрачности CSS. Если я удалю поворот на всех div, ошибка также исчезнет. Я протестировал все преобразования CSS, но безрезультатно...

Я работаю над этим багом уже 3 дня и мне очень важно быстро найти решение... Умоляю, если у кого-то уже была такая проблема беру !

Хорошего конца недели и заранее спасибо...

ИЗМЕНИТЬ //// :

Firefox 30: "Размытие" при нажатии
Chrome 35.0.1916.153: "Размытие" везде при загрузке страницы
IE 11: Никаких проблем, никакого "размытия", все работает отлично!


person Morgann C    schedule 13.06.2014    source источник
comment
Я еще не проверял, не время! Что касается свойства backface-visibility, то это была ошибка с моей стороны. Итак, проблема связана с переходом css. На другой странице моего сайта у меня есть сетка изотопов в повороте div, и размытие тоже. Другой пример с картой Google в том же поворотном элементе div. Только с картой окно ясное, но если я добавлю простой маркер, окно станет размытым. Я буду тестировать с помощью примера W3c номер 4 (w3.org/TR/css-transforms -1). Я бы выложил версию онлайн-сайта сегодня вечером.   -  person Morgann C    schedule 16.06.2014
comment
РЕДАКТИРОВАТЬ // Если я отключу аппаратное ускорение в Firefox, все проблемы исчезнут.   -  person Morgann C    schedule 16.06.2014
comment
Впервые в жизни я могу сказать, что люблю IE11... он работает, без размытия, без проблем. Любая идея отключить рендеринг графического процессора на хроме и ff? я думаю, что это   -  person Morgann C    schedule 16.06.2014


Ответы (1)


Во-первых, вы пропустили - в -ms-transform (вероятно, это причина, по которой в IE нет размытия - он не использовал transform)

Во-вторых, удаление -webkit-backface-visibility сделало так, что Chrome только размывается при переходе (я понятия не имею, почему вы добавили его, если вообще ничего не вращается).

В-третьих, если вы не используете IE8 или что-то в этом роде, вам не нужны filter для ротации, а -o-transform и -moz-transform не нужны, поэтому удалите их

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

Таким образом, в качестве решения у вас есть несколько вариантов. Вы можете либо удалить переход непрозрачности, выбрав что-то вроде margin-left:-600px (это требует изменения плагина в соответствии с требованиями), вы можете переместить заголовок и абзац за пределы <div id="global">, но расположить их так, чтобы они находились в том же положении, что и сейчас (убедитесь, ни один не выходит за пределы повернутого квадрата), или, мой личный фаворит, выберите другой плагин! Тот, который вы используете, довольно устарел, и есть намного лучшие бесплатные, всего один поиск в Google.

person Zach Saucier    schedule 14.06.2014