don't transition between identical backgrounds

js/reveal.js

@@ -122,6 +122,8 @@ var Reveal = (function(){
 		previousSlide,
 		currentSlide,
 
+		previousBackgroundHash,
+
 		// Slides may hold a data-state attribute which we pick up and apply
 		// as a class to the body. This list contains the combined state of
 		// all current slides.
@@ -442,6 +444,7 @@ var Reveal = (function(){
 			};
 
 			var element = document.createElement( 'div' );
+			element.setAttribute( 'data-background-hash', data.background + data.backgroundSize + data.backgroundImage + data.backgroundColor + data.backgroundRepeat + data.backgroundPosition + data.backgroundTransition );
 			element.className = 'slide-background';
 
 			if( data.background ) {
@@ -1891,24 +1894,63 @@ var Reveal = (function(){
 	 */
 	function updateBackground() {
 
-		// Update the classes of all backgrounds to match the
+		var currentBackground = null;
-		// states of their slides (past/present/future)
-		toArray( dom.background.childNodes ).forEach( function( backgroundh, h ) {
 
 		// Reverse past/future classes when in RTL mode
 		var horizontalPast = config.rtl ? 'future' : 'past',
 			horizontalFuture = config.rtl ? 'past' : 'future';
 
-			backgroundh.className = 'slide-background ' + ( h < indexh ? horizontalPast : h > indexh ? horizontalFuture : 'present' );
+		// Update the classes of all backgrounds to match the
+		// states of their slides (past/present/future)
+		toArray( dom.background.childNodes ).forEach( function( backgroundh, h ) {
+
+			backgroundh.className = 'slide-background ';
+
+			if( h < indexh ) {
+				backgroundh.className += horizontalPast;
+			}
+			else if ( h > indexh ) {
+				backgroundh.className += horizontalFuture;
+			}
+			else {
+				backgroundh.className += 'present';
+
+				// Store a reference to the current background element
+				currentBackground = backgroundh;
+			}
 
 			toArray( backgroundh.childNodes ).forEach( function( backgroundv, v ) {
 
-				backgroundv.className = 'slide-background ' + ( v < indexv ? 'past' : v > indexv ? 'future' : 'present' );
+				backgroundv.className = 'slide-background ';
+
+				if( v < indexv ) {
+					backgroundv.className += 'past';
+				}
+				else if ( v > indexv ) {
+					backgroundv.className += 'future';
+				}
+				else {
+					backgroundv.className += 'present';
+
+					// Only if this is the present horizontal and vertical slide
+					if( h === indexh ) currentBackground = backgroundv;
+				}
 
 			} );
 
 		} );
 
+		// Don't transition between identical backgrounds. This
+		// prevents unwanted flicker.
+		if( currentBackground ) {
+			var currentBackgroundHash = currentBackground.getAttribute( 'data-background-hash' );
+			if( currentBackgroundHash === previousBackgroundHash ) {
+				dom.background.classList.add( 'no-transition' );
+			}
+
+			previousBackgroundHash = currentBackgroundHash;
+		}
+
 		// Allow the first background to apply without transition
 		setTimeout( function() {
 			dom.background.classList.remove( 'no-transition' );

test/examples/slide-backgrounds.html

@@ -75,6 +75,27 @@
 					<h2>Same background twice (2/2)</h2>
 				</section>
 
+				<section>
+					<section data-background="#417203">
+						<h2>Same background twice vertical (1/2)</h2>
+					</section>
+					<section data-background="#417203">
+						<h2>Same background twice vertical (2/2)</h2>
+					</section>
+				</section>
+
+				<section data-background="#934f4d">
+					<h2>Same background from horizontal to vertical (1/3)</h2>
+				</section>
+				<section>
+					<section data-background="#934f4d">
+						<h2>Same background from horizontal to vertical (2/3)</h2>
+					</section>
+					<section data-background="#934f4d">
+						<h2>Same background from horizontal to vertical (3/3)</h2>
+					</section>
+				</section>
+
 			</div>
 
 		</div>