cross browser adjustments for overview mode

css/reveal.css

@@ -624,66 +624,6 @@ body {
   -webkit-transition: none;
           transition: none; }
 
-/*********************************************
- * OVERVIEW
- *********************************************/
-.reveal.overview {
-  -webkit-perspective-origin: 50% 50%;
-          perspective-origin: 50% 50%;
-  -webkit-perspective: 700px;
-          perspective: 700px; }
-
-.reveal.overview .slides section {
-  height: 700px;
-  overflow: hidden;
-  opacity: 1 !important;
-  visibility: visible !important;
-  cursor: pointer;
-  -moz-box-sizing: border-box;
-       box-sizing: border-box;
-  outline: 10px solid rgba(150, 150, 150, 0.1);
-  outline-offset: 10px; }
-
-.reveal.overview .slides section, .reveal.overview-deactivating .slides section {
-  -webkit-transition: none;
-          transition: none; }
-
-.reveal.overview .slides section .fragment {
-  opacity: 1; }
-
-.reveal.overview .slides section:after, .reveal.overview .slides section:before {
-  display: none !important; }
-
-.reveal.overview .slides section > section {
-  opacity: 1;
-  cursor: pointer; }
-
-.reveal.overview .slides section:hover, .reveal.overview .slides section.present {
-  outline: 10px solid rgba(150, 150, 150, 0.5); }
-
-.reveal.overview .slides > section.stack {
-  padding: 0;
-  top: 0 !important;
-  background: none;
-  outline: none;
-  overflow: visible; }
-
-.reveal.overview .backgrounds {
-  -webkit-perspective: inherit;
-          perspective: inherit; }
-
-.reveal.overview .backgrounds .slide-background {
-  opacity: 1;
-  visibility: visible; }
-
-.reveal.overview .backgrounds .slide-background, .reveal.overview-deactivating .backgrounds .slide-background {
-  -webkit-transition: none;
-          transition: none; }
-
-.reveal.overview-animated .slides, .reveal.overview-animated .slides section {
-  -webkit-transition: -webkit-transform 0.4s ease;
-          transition: transform 0.4s ease; }
-
 /*********************************************
  * PAUSED MODE
  *********************************************/
@@ -904,6 +844,58 @@ body {
   -webkit-transition-duration: 1200ms;
           transition-duration: 1200ms; }
 
+/*********************************************
+ * OVERVIEW
+ *********************************************/
+.reveal.overview {
+  -webkit-perspective-origin: 50% 50%;
+          perspective-origin: 50% 50%;
+  -webkit-perspective: 700px;
+          perspective: 700px; }
+  .reveal.overview .slides section {
+    height: 700px;
+    opacity: 1 !important;
+    overflow: hidden;
+    visibility: visible !important;
+    cursor: pointer;
+    -moz-box-sizing: border-box;
+         box-sizing: border-box; }
+  .reveal.overview .slides section:hover, .reveal.overview .slides section.present {
+    outline: 10px solid rgba(150, 150, 150, 0.4);
+    outline-offset: 10px; }
+  .reveal.overview .slides section .fragment {
+    opacity: 1;
+    -webkit-transition: none;
+            transition: none; }
+  .reveal.overview .slides section:after, .reveal.overview .slides section:before {
+    display: none !important; }
+  .reveal.overview .slides > section.stack {
+    padding: 0;
+    top: 0 !important;
+    background: none;
+    outline: none;
+    overflow: visible; }
+  .reveal.overview .backgrounds {
+    -webkit-perspective: inherit;
+            perspective: inherit; }
+  .reveal.overview .backgrounds .slide-background {
+    opacity: 1;
+    visibility: visible;
+    outline: 10px solid rgba(150, 150, 150, 0.1);
+    outline-offset: 10px; }
+
+.reveal.overview .slides section, .reveal.overview-deactivating .slides section {
+  -webkit-transition: none;
+          transition: none; }
+
+.reveal.overview .backgrounds .slide-background, .reveal.overview-deactivating .backgrounds .slide-background {
+  -webkit-transition: none;
+          transition: none; }
+
+.reveal.overview-animated .slides, .reveal.overview-animated .slides section, .reveal.overview-animated .backgrounds .slide-background {
+  -webkit-transition: -webkit-transform 0.4s ease;
+          transition: transform 0.4s ease; }
+
 /*********************************************
  * RTL SUPPORT
  *********************************************/

css/reveal.scss

@@ -739,69 +739,6 @@ body {
 }
 
 
-/*********************************************
- * OVERVIEW
- *********************************************/
-
-.reveal.overview {
-	perspective-origin: 50% 50%;
-	perspective: 700px;
-}
-.reveal.overview .slides section {
-	height: 700px;
-	overflow: hidden;
-	opacity: 1 !important;
-	visibility: visible !important;
-	cursor: pointer;
-	box-sizing: border-box;
-	outline: 10px solid rgba(150,150,150,0.1);
-	outline-offset: 10px;
-}
-.reveal.overview .slides section,
-.reveal.overview-deactivating .slides section {
-	transition: none;
-}
-.reveal.overview .slides section .fragment {
-	opacity: 1;
-}
-.reveal.overview .slides section:after,
-.reveal.overview .slides section:before {
-	display: none !important;
-}
-.reveal.overview .slides section>section {
-	opacity: 1;
-	cursor: pointer;
-}
-	.reveal.overview .slides section:hover,
-	.reveal.overview .slides section.present {
-		outline: 10px solid rgba(150,150,150,0.5);
-	}
-.reveal.overview .slides>section.stack {
-	padding: 0;
-	top: 0 !important;
-	background: none;
-	outline: none;
-	overflow: visible;
-}
-
-.reveal.overview .backgrounds {
-	perspective: inherit;
-}
-.reveal.overview .backgrounds .slide-background {
-	opacity: 1;
-	visibility: visible;
-}
-.reveal.overview .backgrounds .slide-background,
-.reveal.overview-deactivating .backgrounds .slide-background {
-	transition: none;
-}
-
-.reveal.overview-animated .slides,
-.reveal.overview-animated .slides section {
-	transition: transform 0.4s ease;
-}
-
-
 /*********************************************
  * PAUSED MODE
  *********************************************/
@@ -1042,6 +979,76 @@ body {
 }
 
 
+/*********************************************
+ * OVERVIEW
+ *********************************************/
+
+.reveal.overview {
+	perspective-origin: 50% 50%;
+	perspective: 700px;
+
+	.slides section {
+		height: 700px;
+		opacity: 1 !important;
+		overflow: hidden;
+		visibility: visible !important;
+		cursor: pointer;
+		box-sizing: border-box;
+	}
+	.slides section:hover,
+	.slides section.present {
+		outline: 10px solid rgba(150,150,150,0.4);
+		outline-offset: 10px;
+	}
+	.slides section .fragment {
+		opacity: 1;
+		transition: none;
+	}
+	.slides section:after,
+	.slides section:before {
+		display: none !important;
+	}
+	.slides>section.stack {
+		padding: 0;
+		top: 0 !important;
+		background: none;
+		outline: none;
+		overflow: visible;
+	}
+
+	.backgrounds {
+		perspective: inherit;
+	}
+
+	.backgrounds .slide-background {
+		opacity: 1;
+		visibility: visible;
+
+		// This can't be applied to the slide itself in Safari
+		outline: 10px solid rgba(150,150,150,0.1);
+		outline-offset: 10px;
+	}
+}
+
+// Disable transitions transitions while we're activating
+// or deactivating the overview mode.
+.reveal.overview .slides section,
+.reveal.overview-deactivating .slides section {
+	transition: none;
+}
+
+.reveal.overview .backgrounds .slide-background,
+.reveal.overview-deactivating .backgrounds .slide-background {
+	transition: none;
+}
+
+.reveal.overview-animated .slides,
+.reveal.overview-animated .slides section,
+.reveal.overview-animated .backgrounds .slide-background {
+	transition: transform 0.4s ease;
+}
+
+
 /*********************************************
  * RTL SUPPORT
  *********************************************/

js/reveal.js

@@ -300,7 +300,11 @@
 
 		features.touch = !!( 'ontouchstart' in window );
 
-		isMobileDevice = navigator.userAgent.match( /(iphone|ipod|ipad|android)/gi );
+		// Transitions in the overview are disabled in desktop and
+		// mobile Safari since they lag terribly
+		features.overviewTransitions = !/Version\/[\d\.]+.*Safari/.test( navigator.userAgent );
+
+		isMobileDevice = /(iphone|ipod|ipad|android)/gi.test( navigator.userAgent );
 
 	}
 
@@ -1647,9 +1651,11 @@
 			dom.wrapper.classList.add( 'overview' );
 			dom.wrapper.classList.remove( 'overview-deactivating' );
 
-			setTimeout( function() {
+			if( features.overviewTransitions ) {
-				dom.wrapper.classList.add( 'overview-animated' );
+				setTimeout( function() {
-			}, 1 );
+					dom.wrapper.classList.add( 'overview-animated' );
+				}, 1 );
+			}
 
 			// Don't auto-slide while in overview mode
 			cancelAutoSlide();
@@ -1712,12 +1718,12 @@
 
 		// Layout slides
 		toArray( dom.wrapper.querySelectorAll( HORIZONTAL_SLIDES_SELECTOR ) ).forEach( function( hslide, h ) {
-			transformElement( hslide, 'translateX(' + ( h * slideWidth ) + 'px)' );
+			transformElement( hslide, 'translate3d(' + ( h * slideWidth ) + 'px, 0, 0)' );
 
 			if( hslide.classList.contains( 'stack' ) ) {
 
 				toArray( hslide.querySelectorAll( 'section' ) ).forEach( function( vslide, v ) {
-					transformElement( vslide, 'translateY(' + ( v * slideHeight ) + 'px)' );
+					transformElement( vslide, 'translate3d(0, ' + ( v * slideHeight ) + 'px, 0)' );
 				} );
 
 			}
@@ -1725,10 +1731,10 @@
 
 		// Layout slide backgrounds
 		toArray( dom.background.childNodes ).forEach( function( hbackground, h ) {
-			transformElement( hbackground, 'translateX(' + ( h * slideWidth ) + 'px)' );
+			transformElement( hbackground, 'translate3d(' + ( h * slideWidth ) + 'px, 0, 0)' );
 
 			toArray( hbackground.querySelectorAll( '.slide-background' ) ).forEach( function( vbackground, v ) {
-				transformElement( vbackground, 'translateY(' + ( v * slideHeight ) + 'px)' );
+				transformElement( vbackground, 'translate3d(0, ' + ( v * slideHeight ) + 'px, 0)' );
 			} );
 		} );