2013-09-05 4 views
8

В IE10 (Windows 8 и только Windows 8, в том числе RT), у меня есть этот div с overflow : auto который анимированный снаружи экрана (CSS3 transition + transform)Любопытный перевод + переполнения ошибка в IE10

Содержание этого div (обычный текст) не отображается до конца перехода, то есть div кажется пустым.

Если я установил overflow : hidden, проблема исчезнет.

Это поведение воспроизводится здесь: http://jsbin.com/inUsayU/5/ (ссылка jsBin будет работать только в IE10)

Держите экран расщепленные (если не расщепляется, добавить CSS и HTML панель), наведите курсор на первую ссылку, вы должен видеть, что div переходит пустым. Попробуйте навести вторую ссылку, другой div переход штраф. Возможно, вам придется перезапускать «Run with JS» каждый раз, потому что часто (не всегда) проблема происходит только один раз.

В моем проекте я взломал уродливое решение с UA Sniffing и переключил состояние overflow до и после перехода, но я надеюсь, что есть более простое объяснение/решение, которое вы можете предоставить.

+3

1) «Сценарий» подразумевает, что вы использовали http://jsfiddle.net 2) Вы ссылаетесь на * вторую ссылку *, но в вашей демонстрации jsbin есть только одна ссылка. 3) Когда я нахожу ссылку в Windows 7 IE10, 'div' скользит по экрану и не отображается пустым. – tw16

+5

1/не заботясь. 2/oups, не связывали хорошую скрипку. 3/вы должны. Используйте разделенный экран в режиме редактирования + запуск с помощью кнопки JS, ошибка становится более очевидной. Это не систематично, поэтому попробуйте несколько раз. – mddw

+0

Я все еще не вижу проблемы в Windows 7 - IE10. Обе ссылки работают одинаково для меня. – tw16

ответ

1

Я протестировал в этом Internet Explorer 11 на Windows 8.1. Я также тестировал с включенной эмуляцией IE10. Кроме того, я тестировал в IE10 на Windows Phone. Это в дополнение к тестам IE10, которые были проведены на Windows 7 уже. Во всех случаях я делал не. Я подозреваю, что в этом есть что-то другое, кроме ошибки с браузером.

Что касается вашей реализации, я бы предложил избегать -ms-transition, так как префиксные свойства считаются экспериментальными. Internet Explorer 10 supports the unprefixed transition property.

В настоящее время я загружаю виртуальную машину IE10 с http://modern.ie. Как только я встану, я снова проведу это и отправлю отчет с обновлением.

+0

Я все еще вижу проблему в W8.1/IE11. Вы нажмете «edit jsbin», а затем, каждый раз, на «run with js», чтобы обновить ошибку? Также IE11 лучше, так что ошибка сложнее поймать. Вы должны знать, что это здесь. (также видел его в VMs & Surface, поэтому не указывал на мою машину.) – mddw

+0

@mddw Я не вижу его в IE11. Вы видите это последовательно, каждый раз, когда вы запускаете демо? – Sampson

+0

Да, каждый раз, когда я перезагружаю его с помощью «run with js». Но трудно поймать IE11 + хорошую установку, перерисовать происходит, как только div переводится в viewport. Он медленнее и более заметен на поверхности. – mddw

0

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

Попробуйте отключить аппаратное ускорение в IE10/11 (в разделе «Параметры Интернета»> «Дополнительно» должно быть что-то вроде ускоренной графики> Отключение графического процессора и использование программного обеспечения - мои окна на португальском языке, поэтому у меня нет точного местоположения) перезагрузите Windows (это может быть общесистемная конфигурация).

Затем повторите попытку, если проблема не исчезнет, ​​это может быть ошибка, связанная с несовместимостью между IE и вашей графической картой - это объясняет, почему так много людей не смогли воспроизвести вашу ошибку (например, я).

Некоторые функции CSS запускают аппаратное ускорение, поэтому они гораздо интереснее js-анимаций, но некоторые браузеры/комбинации графических процессоров иногда отстают или показывают только первый и последний шаги анимации.

+0

У меня также была эта проблема на планшете Surface, поэтому это не проблема с оборудованием. – mddw

Смежные вопросы