Изображение Flexslider очень слабое ошибочное движение в Firefox

Question

Я использую Flexslider, но я столкнулся с какой-то проблемой.

Это действительно видно в demo. Это происходит только в Firefox, или, по крайней мере, оно не отображается в IE9 или Chrome. Когда вы измените размер браузера на ширину около 400-500 пикселей и переключитесь между двумя последними изображениями (холмом и птицей), если вы внимательно посмотрите, вы можете увидеть, что изображения на самом деле немного подпрыгивают вверх и вниз примерно на пиксель, когда они переключатель. На самом деле вам может потребоваться несколько попыток изменения размера окна, чтобы воспроизвести это поведение, которое может не всегда отображаться, но оно составляет не менее 50% времени.

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

Однако я обнаружил, что, когда у изображений есть подпись (используется тег <p>), они не проявляют этого поведения. Вы можете проверить это с помощью firebug.

Мой вопрос: кто-нибудь знает, что тэг p будет делать, чтобы предотвратить это поведение. Это здорово, когда вы можете заставить его работать, но я хочу избежать использования не смыслового пустого абзаца в разметке, если я смогу его избежать.

Answer 1

Я установил его, добавив следующий код в css. Я не понимаю, почему, но, похоже, что-то нужно либо за пределами тегов <li> (или имеющих высоту внутри них?), Чтобы он оставался устойчивым. Изменение стиля списка на диск также работает, но это будет выглядеть не очень хорошо.

.slides li:after { 
content: "."; 
position:absolute; 
top:0; 
left:0; 
z-index:-1000; 
} 

EDIT: На самом деле, что код работает немного лучше, если top:0 заменяется bottom:0 как странный эффект возвращается, когда ползунок частично за пределами экрана в противном случае.