Cycle2 Slideshow Glitch Where Image Will Randomly Overlap with DIV Below

Question

On a recent project I'm running into an issue where an image in a Cycle2 slideshow will overlap on a div just below it. It happens quite randomly (there are seven pages using this slideshow and it happens, oh, every 8th or 9th time — I haven't been able to spot the pattern.

When it happens, bringing up the web inspector will force a redraw and the image will pop into place. I have seen this in Safari, Firefox and Chrome and on both Mac and Windows.

A screen shot of the glitch is on Droplr and the live version is here. It happens with all seven pages (found under the Seraform and Previous Work menus) and it might take several clicks through all pages to see the issue.

http://d.pr/i/wnwk

And this is how the page should look:

http://d.pr/i/esRS

I have tried every debugging trick I can think of and am at a complete loss.

Answer 1

As I investigated the issue further, I found the problem was connected to the div holding the slides would always start with an area of 0 pixels. Most of the time, that div would resize automatically (pushing the other div down) but, on rare occasions, the block would stay 0 pixels causing and the image would overlap.

To solve this, I tossed in a redraw function I found on Coderwall as part of some JS to, well, redraw the slideshow area on document ready.