Dara: Use CSS and a temporary class to prop up the flexslider slideshow while the page is loading, to prevent overlap in Firefox. Fixes #169.

dara/assets/js/slider.js

@@ -1,5 +1,9 @@
 ( function( $ ) {
 
+	function removePlaceholderPadding() {
+		$('.flexslider .hero-content').removeClass( 'propped-up');
+	}
+
 	function loadFlexslider() {
 		$( '.flex-viewport-wrapper' ).flexslider( {
 			animation: "fade",
@@ -12,7 +16,8 @@
 			itemWidth: 1180,
 			itemHeight: 600,
 			smoothHeight: true,
-			selector: '.slides > .hero-content-wrapper'
+			selector: '.slides > .hero-content-wrapper',
+			init: removePlaceholderPadding,
 		} );
 	}
 

dara/components/post/content-featured.php

@@ -10,7 +10,7 @@ if ( empty( $featured ) )
 ?>
 
 <div id="featured-content" class="flexslider hero">
-	<div class="flex-viewport-wrapper hero-content">
+	<div class="flex-viewport-wrapper hero-content propped-up">
 		<div class="featured-posts slides" id="featured-slides">
 		<?php
 			foreach ( $featured as $post ) :

dara/style.css

@@ -1471,6 +1471,9 @@ blockquote p:last-child {
 	position: relative;
 	overflow: hidden;
 }
+.propped-up {
+	padding-bottom: 50.8474576271186%; /* Makes sure slideshow maintains aspect ratio while loading to avoid overlap */
+}
 .hero-content img,
 .thumbnail-placeholder {
 	display: block;