xobs/lca2019-talk
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

none/fade/slide transitions use flat transform style, prevents blurred content #1002

Browse Source
This commit is contained in:
Hakim El Hattab 2016-08-01 09:15:34 +02:00
parent 304b0292be
commit bc4fc65da4
2 changed files with 34 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
css/reveal.css
View File

@ -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; }

12
css/reveal.scss
View File

@ -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;