From c8569e2d9ff675b806e5d5bf94ba1a07d121e74b Mon Sep 17 00:00:00 2001 From: Hakim El Hattab Date: Tue, 27 Jan 2015 19:27:55 +0100 Subject: [PATCH] cross browser adjustments for overview mode --- css/reveal.css | 112 +++++++++++++++++++--------------------- css/reveal.scss | 133 +++++++++++++++++++++++++----------------------- js/reveal.js | 22 +++++--- 3 files changed, 136 insertions(+), 131 deletions(-) diff --git a/css/reveal.css b/css/reveal.css index 69b7cf9..2e18ade 100644 --- a/css/reveal.css +++ b/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 *********************************************/ diff --git a/css/reveal.scss b/css/reveal.scss index b3f3bdc..70fe2c1 100644 --- a/css/reveal.scss +++ b/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 *********************************************/ diff --git a/js/reveal.js b/js/reveal.js index ddbe800..37c6831 100644 --- a/js/reveal.js +++ b/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() { - dom.wrapper.classList.add( 'overview-animated' ); - }, 1 ); + if( features.overviewTransitions ) { + setTimeout( function() { + 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)' ); } ); } );