So I’ve worked on getting a jquery carousel to work with the design of my site. The carousel is found here:
http://www.fortelessons.com.
I minimized all the javascript on the site, so to view the specific jquery before minimizing for the carousel I made a copy of it here:
http://fortelessons.com/js/full/infinite.js
So it works everywhere I have tested it just fine. But now I look at Chrome 20.0.1132.57 and I’m having some very weird issues. On the first initial load it looks great. But then if I reload the page “Learn Piano”, “Learn Voice”, and “Learn Guitar” are moved over to the left by one instrument leaving a blank below the picture of the guitar. If I clear the cache and reload it’s fine, but once it is in the cache it does it again. How does this make any sense? I don’t even know where to begin. It doesn’t do this with my current version of firefox or IE, just Chrome.
I can post a more detailed description of what the jquery is doing if it would save you time looking through the code, but I just wanted to know if it was reproducible by anyone or if anyone had any idea why the page being cached would somehow change how it was displayed. I don’t even know how to start debugging it.
EDIT: Actually it’s only when I click the reload button. If I click around the site and then click back there’s no problem. But once I click reload it gets messed up. If I then click around again it goes back to normal. I guess in reality this wouldn’t be a huge issue because it would almost never happen, but still I would like to know what’s going on.
I think the issue you were having came from a problem where absolutely positioned elements make the surrounding element empty of naturally flowing elements.
There appears to have been an issue with caching where when you reloaded the browser did not get all of the information necessary to draw the web-page as you intended.
When you make each
liposition:relativethe view is specifically told what to do with the related elements and everything works fine – even when reloaded. Caching isn’t an issue any more.