xobs/fa23-si
1
0
Fork 0
Code Issues Pull Requests Packages Projects 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%; width: 100%;
padding: 20px 0px; padding: 20px 0px;
z-index: 10; z-index: 10;
-webkit-transform-style: preserve-3d; -webkit-transform-style: flat;
transform-style: preserve-3d; 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); -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); } 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 * CONVEX TRANSITION
* Aliased 'default' for backwards compatibility * 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].past,
.reveal .slides > section[data-transition~=default-out].past, .reveal .slides > section[data-transition~=default-out].past,
.reveal.default .slides > section:not([data-transition]).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); -webkit-transform: translate3d(0, 300px, 0) rotateX(-70deg) translate3d(0, 300px, 0);
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].past,
.reveal .slides > section[data-transition~=convex-out].past, .reveal .slides > section[data-transition~=convex-out].past,
.reveal.convex .slides > section:not([data-transition]).past { .reveal.convex .slides > section:not([data-transition]).past {
@ -514,6 +524,11 @@ body {
/********************************************* /*********************************************
* CONCAVE TRANSITION * 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].past,
.reveal .slides > section[data-transition~=concave-out].past, .reveal .slides > section[data-transition~=concave-out].past,
.reveal.concave .slides > section:not([data-transition]).past { .reveal.concave .slides > section:not([data-transition]).past {
@ -584,7 +599,9 @@ body {
min-height: 700px; min-height: 700px;
-webkit-backface-visibility: hidden; -webkit-backface-visibility: hidden;
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 { .reveal.center.cube .slides section {
min-height: 0; } min-height: 0; }
@ -657,7 +674,9 @@ body {
.reveal.page .slides section { .reveal.page .slides section {
padding: 30px; padding: 30px;
min-height: 700px; 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 { .reveal.page .slides section.past {
z-index: 12; } z-index: 12; }

12
css/reveal.scss
View File

@ -408,7 +408,7 @@ body {
padding: 20px 0px; padding: 20px 0px;
z-index: 10; z-index: 10;
transform-style: preserve-3d; transform-style: flat;
transition: transform-origin 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985), 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), transform 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985),
visibility 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 { @each $stylename in default, convex {
@include transition-global(#{$stylename}) {
transform-style: preserve-3d;
}
@include transition-horizontal-past(#{$stylename}) { @include transition-horizontal-past(#{$stylename}) {
transform: translate3d(-100%, 0, 0) rotateY(-90deg) translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0) rotateY(-90deg) translate3d(-100%, 0, 0);
} }
@ -557,6 +561,10 @@ body {
* CONCAVE TRANSITION * CONCAVE TRANSITION
*********************************************/ *********************************************/
@include transition-global(concave) {
transform-style: preserve-3d;
}
@include transition-horizontal-past(concave) { @include transition-horizontal-past(concave) {
transform: translate3d(-100%, 0, 0) rotateY(90deg) translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0) rotateY(90deg) translate3d(-100%, 0, 0);
} }
@ -607,6 +615,7 @@ body {
min-height: 700px; min-height: 700px;
backface-visibility: hidden; backface-visibility: hidden;
box-sizing: border-box; box-sizing: border-box;
transform-style: preserve-3d;
} }
.reveal.center.cube .slides section { .reveal.center.cube .slides section {
min-height: 0; min-height: 0;
@ -678,6 +687,7 @@ body {
padding: 30px; padding: 30px;
min-height: 700px; min-height: 700px;
box-sizing: border-box; box-sizing: border-box;
transform-style: preserve-3d;
} }
.reveal.page .slides section.past { .reveal.page .slides section.past {
z-index: 12; z-index: 12;