Flexslider image very slight erroneous movement in Firefox

Question

I am using Flexslider but I've encountered some kind of a problem.

It's actually visible in the demo. This only happens in Firefox, or at least it doesn't appear in IE9 or Chrome. When you re-size the browser to about 400-500px wide and switch between the last two images ( the hill and the bird ), if you look carefully you can see that the images actually jump up and down slightly by about a pixel when they switch. Actually you might need more than one attempt at resizing the window to replicate this behaviour it may not always show, but it does at least 50% of the time.

This is very tiny I know but when I was doing a 1200px wide slider it was very noticeable. I spend hours tracing the problem until I noticed it was actually inherent.

However what I discovered was that when the images have a caption ( a <p> tag is used ) then they don't exhibit this behaviour. You can verify this using firebug.

My question is this: Does anyone know what the p tag would be doing to prevent this behaviour. It's great to be able to force it to work but I want to avoid using a non semantic empty paragraph tag in the markup if I can avoid it.

Answer 1

I fixed it by adding the following code to the css. I don't understand why but it seems to need something either outside of the <li> tags (or having height inside them?) for it to remain steady. Changing list-style to disc also works, but that won't look good.

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

EDIT: Actually that code works slightly better if top:0 is replaced by bottom:0 as the strange effect comes back when the slider is partially off screen otherwise.