aboutsummaryrefslogtreecommitdiff
path: root/css
diff options
context:
space:
mode:
authorHakim El Hattab <hakim.elhattab@gmail.com>2016-08-01 09:15:34 +0200
committerHakim El Hattab <hakim.elhattab@gmail.com>2016-08-01 09:15:34 +0200
commitbc4fc65da475b1234b32c9eb5070138218abff76 (patch)
treed3225e1667d7c822d922bd4189ede3a97691a530 /css
parent304b0292be05d387947481eee7060f67ab808b5b (diff)
downloadperl-software-in-gnu-guix-bc4fc65da475b1234b32c9eb5070138218abff76.tar
perl-software-in-gnu-guix-bc4fc65da475b1234b32c9eb5070138218abff76.tar.gz
none/fade/slide transitions use flat transform style, prevents blurred content #1002
Diffstat (limited to 'css')
-rw-r--r--css/reveal.css27
-rw-r--r--css/reveal.scss12
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;