I've got a problem with the way Firefox is handling a site I have built. I think the problem is related to the way FF is measuring the height of elements and the way Stellar.js interacts with those heights.
So, when I visit it in IE, Chrome, or Safari, everything loads just fine the first time I visit it. You'll notice that in those browsers the photos appear in designated positions inside the pink foreground graphic as you click on the nav items and have a parallax effect on them. However, when I visit it in FF, the first visit has the images in weird positions. If I click refresh/press 'f5', the problem is suddenly fixed and the images are all in the right spot. However, once I clear my cache and reload the page, the pics are in the wrong places again until I hit refresh again.
(I would recommend visiting the site FIRST in something other than FF so you can see what I mean with the image positions) http://www.thelovestrange.com/
The basic structure of the page is 5 div's setup like this:
<div class='slide' id="slide1" >
<img class='parallaxing_image_in_background' />
<div class='foreground' >
<img class='portion_of_pink_foreground_image' />
</div>
</div>
Pretty much all the positioning and widths/heights on the site are done with percentages. The size of the .slide's are controlled by the .foreground's width being set to 200% and then the .foreground img is set width: 100%, height: auto. So, the .foreground ends up being 200% of the window and the height is whatever the image ends up scaling to.
I think the problem is the somewhere in the way FF is reading the height of the .slide div's. It's almost like the first time you visit the page, it doesn't register what the height of the .slide's are in time before stellar.js loads because the height is not explicitly declared in the css. So, stellar.js doesn't know how to position the elements correctly. But, when you refresh, the height has been cached so the next time it loads, it can properly position the element. I can confirm that if I set a height on the .slide's in the css, the problem doesn't occur and the elements get positioned correctly everytime. The problem is, if I do that, the responsiveness of the site falls apart.
I've tried checking for some documentation on how FF handles element heights when they are not declared but I can't find anything to explain this. I attempted a bunch of adjustments to the stellar.js object, but in the end, the only thing that gets the positioning correct on the first page visit is if the height of those .slide div's is explicitly defined in the css.
Obviously, it isn't a very good think to have someone visit my client's site and not see it correctly the first try :)
Any thoughts or ideas? Any additional info that I can give or tests to run? I'm stumped.
I found the solution:
The heights are not being calculated before the $(document).ready() calls the the stellar.js script because they are based on the height's of the .forground images. The document is ready, but the images are not necessarily loaded (to my understanding). I wrapped the the stellar.js call in $(window).load() so ALL the content,including images, are loaded before it tries to do its calculations and placement of the parallaxing images and, WA LA! Problem solved.