[Mobile] Fix Shift

Shifting occurring during transition
fixed by making transition backface-
visibility hidden during the
transition.
This commit is contained in:
Shivam Dave 2015-07-20 10:25:27 -07:00
parent f98915cddd
commit dcdafbaebf
2 changed files with 7 additions and 1 deletions

View File

@ -761,6 +761,7 @@ mct-container {
-webkit-transition-duration: 0.35s; -webkit-transition-duration: 0.35s;
transition-duration: 0.35s; transition-duration: 0.35s;
transition-timing-function: ease; transition-timing-function: ease;
backface-visibility: hidden;
-moz-transition-property: opacity; -moz-transition-property: opacity;
-o-transition-property: opacity; -o-transition-property: opacity;
-webkit-transition-property: opacity; -webkit-transition-property: opacity;
@ -786,6 +787,7 @@ mct-container {
-webkit-transition-duration: 0.35s; -webkit-transition-duration: 0.35s;
transition-duration: 0.35s; transition-duration: 0.35s;
transition-timing-function: ease; transition-timing-function: ease;
backface-visibility: hidden;
left: auto !important; left: auto !important;
width: 100% !important; } } width: 100% !important; } }
@ -797,6 +799,7 @@ mct-container {
-webkit-transition-duration: 0.35s; -webkit-transition-duration: 0.35s;
transition-duration: 0.35s; transition-duration: 0.35s;
transition-timing-function: ease; transition-timing-function: ease;
backface-visibility: hidden;
-moz-transition-property: opacity; -moz-transition-property: opacity;
-o-transition-property: opacity; -o-transition-property: opacity;
-webkit-transition-property: opacity; -webkit-transition-property: opacity;
@ -836,6 +839,7 @@ mct-container {
-webkit-transition-duration: 0.35s; -webkit-transition-duration: 0.35s;
transition-duration: 0.35s; transition-duration: 0.35s;
transition-timing-function: ease; transition-timing-function: ease;
backface-visibility: hidden;
left: auto !important; } } left: auto !important; } }
@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px) { @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px) {
/* line 98, ../sass/mobile/_layout.scss */ /* line 98, ../sass/mobile/_layout.scss */
@ -862,7 +866,8 @@ mct-container {
-o-transition-duration: 0.35s; -o-transition-duration: 0.35s;
-webkit-transition-duration: 0.35s; -webkit-transition-duration: 0.35s;
transition-duration: 0.35s; transition-duration: 0.35s;
transition-timing-function: ease; } } transition-timing-function: ease;
backface-visibility: hidden; } }
@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) { @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) {
/* line 129, ../sass/mobile/_layout.scss */ /* line 129, ../sass/mobile/_layout.scss */

View File

@ -92,4 +92,5 @@
@mixin slMenuTransitions { @mixin slMenuTransitions {
@include transition-duration(.35s); @include transition-duration(.35s);
transition-timing-function: ease; transition-timing-function: ease;
backface-visibility: hidden;
} }