From bc4fc65da475b1234b32c9eb5070138218abff76 Mon Sep 17 00:00:00 2001 From: Hakim El Hattab Date: Mon, 1 Aug 2016 09:15:34 +0200 Subject: [PATCH] none/fade/slide transitions use flat transform style, prevents blurred content #1002 --- css/reveal.css | 27 +++++++++++++++++++++++---- css/reveal.scss | 12 +++++++++++- 2 files changed, 34 insertions(+), 5 deletions(-) diff --git a/css/reveal.css b/css/reveal.css index 778076e..fae8123 100644 --- a/css/reveal.css +++ b/css/reveal.css @@ -341,8 +341,8 @@ body { width: 100%; padding: 20px 0px; z-index: 10; - -webkit-transform-style: preserve-3d; - transform-style: preserve-3d; + -webkit-transform-style: flat; + transform-style: flat; -webkit-transition: -webkit-transform-origin 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985), -webkit-transform 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985), visibility 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985), opacity 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); transition: transform-origin 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985), transform 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985), visibility 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985), opacity 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); } @@ -463,6 +463,11 @@ body { * CONVEX TRANSITION * Aliased 'default' for backwards compatibility *********************************************/ +.reveal .slides section[data-transition=default], +.reveal.default .slides section:not([data-transition]) { + -webkit-transform-style: preserve-3d; + transform-style: preserve-3d; } + .reveal .slides > section[data-transition=default].past, .reveal .slides > section[data-transition~=default-out].past, .reveal.default .slides > section:not([data-transition]).past { @@ -487,6 +492,11 @@ body { -webkit-transform: translate3d(0, 300px, 0) rotateX(-70deg) translate3d(0, 300px, 0); transform: translate3d(0, 300px, 0) rotateX(-70deg) translate3d(0, 300px, 0); } +.reveal .slides section[data-transition=convex], +.reveal.convex .slides section:not([data-transition]) { + -webkit-transform-style: preserve-3d; + transform-style: preserve-3d; } + .reveal .slides > section[data-transition=convex].past, .reveal .slides > section[data-transition~=convex-out].past, .reveal.convex .slides > section:not([data-transition]).past { @@ -514,6 +524,11 @@ body { /********************************************* * CONCAVE TRANSITION *********************************************/ +.reveal .slides section[data-transition=concave], +.reveal.concave .slides section:not([data-transition]) { + -webkit-transform-style: preserve-3d; + transform-style: preserve-3d; } + .reveal .slides > section[data-transition=concave].past, .reveal .slides > section[data-transition~=concave-out].past, .reveal.concave .slides > section:not([data-transition]).past { @@ -584,7 +599,9 @@ body { min-height: 700px; -webkit-backface-visibility: hidden; backface-visibility: hidden; - box-sizing: border-box; } + box-sizing: border-box; + -webkit-transform-style: preserve-3d; + transform-style: preserve-3d; } .reveal.center.cube .slides section { min-height: 0; } @@ -657,7 +674,9 @@ body { .reveal.page .slides section { padding: 30px; min-height: 700px; - box-sizing: border-box; } + box-sizing: border-box; + -webkit-transform-style: preserve-3d; + transform-style: preserve-3d; } .reveal.page .slides section.past { z-index: 12; } diff --git a/css/reveal.scss b/css/reveal.scss index 9045428..c888a27 100644 --- a/css/reveal.scss +++ b/css/reveal.scss @@ -408,7 +408,7 @@ body { padding: 20px 0px; z-index: 10; - transform-style: preserve-3d; + transform-style: flat; transition: transform-origin 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985), transform 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985), visibility 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985), @@ -539,6 +539,10 @@ body { *********************************************/ @each $stylename in default, convex { + @include transition-global(#{$stylename}) { + transform-style: preserve-3d; + } + @include transition-horizontal-past(#{$stylename}) { transform: translate3d(-100%, 0, 0) rotateY(-90deg) translate3d(-100%, 0, 0); } @@ -557,6 +561,10 @@ body { * CONCAVE TRANSITION *********************************************/ +@include transition-global(concave) { + transform-style: preserve-3d; +} + @include transition-horizontal-past(concave) { transform: translate3d(-100%, 0, 0) rotateY(90deg) translate3d(-100%, 0, 0); } @@ -607,6 +615,7 @@ body { min-height: 700px; backface-visibility: hidden; box-sizing: border-box; + transform-style: preserve-3d; } .reveal.center.cube .slides section { min-height: 0; @@ -678,6 +687,7 @@ body { padding: 30px; min-height: 700px; box-sizing: border-box; + transform-style: preserve-3d; } .reveal.page .slides section.past { z-index: 12;