Как избежать бесконечного цикла с переходом CSS3 и вертикальной полосой прокрутки в Webkit?

Предыстория:

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

Проблема

Браузеры Webkit, кажется, входят в бесконечный цикл / мерцание, когда переход приводит к изменению наличия или отсутствия вертикальной полосы прокрутки. Вот демо поведение ... чтобы вызвать его, просто медленно измените размер окна вокруг отметки 700 пикселей в ширину в Chrome или Safari на ПК.

Вопрос/что я пробовал

Мне интересно, какой обходной путь здесь для Webkit? У Firefox с этим проблем нет. Я пытался удалить смягчение и ускорить переход (не желательно). Я понимаю, что могу просто удалить вертикальные переходы и просто изменить ширину, однако для моего дизайна важно переходить как по высоте, так и по ширине.


css responsive-design css-transitions webkit media-queries
person Derek Hunziker    schedule 11.09.2012    source источник
comment
Спасибо за ссылку @ViralShah, однако, похоже, это не связано. Они говорят о достижении бесконечного цикла с фоновой позицией. Мерцание, которое он испытывал, не такое, как у меня.   -  person Derek Hunziker    schedule 11.09.2012

Ответы (1)


arrow_upward
1
arrow_downward

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

html {
    overflow-y: scroll; 
}

Вот ваш пример с добавленным выше фрагментом: http://jsfiddle.net/joshnh/8XW4v/show

Я не уверен, является ли это ошибкой webkit, потому что, если подумать, это ожидаемое поведение (это просто странно, и Firefox сделал умную вещь, чтобы этого не произошло). По сути, когда срабатывает медиа-запрос, элемент сжимается, и родителю больше не нужна полоса прокрутки. Проблема в том, что как только полоса прокрутки исчезает, медиа-запрос перестает быть актуальным из-за нескольких дополнительных пикселей, которые теперь доступны. Итак, объект снова растет, родитель возвращает полосу прокрутки, снова запускает медиа-запрос и так далее...

person joshnh    schedule 11.09.2012
comment
Простой и элегантный. Большое спасибо! - person Derek Hunziker; 11.09.2012