Skip to content

Commit

Permalink
Not using transforms in Android stock
Browse files Browse the repository at this point in the history 
Bad performance in the Android stock browser when using Flyout
  • Loading branch information
@yagopv
yagopv committed Oct 15, 2013
1 parent bf84846 commit a15dad2
Show file tree
Hide file tree
Showing 11 changed files with 38 additions and 64 deletions.
25 changes: 3 additions & 22 deletions dist/css/Stashy.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -543,11 +543,6 @@
.st-offcanvas {
overflow: hidden;
width: 100%;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
}
.st-offcanvas * {
-webkit-box-sizing: border-box;
Expand Down Expand Up @@ -585,11 +580,6 @@
width: 100%;
display: block;
position: relative;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
}
.st-offcanvas.active-transitions .st-offcanvas-menu,
.st-offcanvas.active-transitions .st-offcanvas-main,
Expand Down Expand Up @@ -706,13 +696,6 @@
overflow: hidden;
width: 100%;
}
.st-flyout-container {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
}
.st-flyout-container * {
margin: 0;
-webkit-box-sizing: border-box;
Expand All @@ -724,11 +707,6 @@
overflow: hidden;
z-index: 0;
background: #cccccc;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
}
.st-flyout-container .st-flyout-menu a {
clear: both;
Expand All @@ -740,6 +718,9 @@
overflow: hidden;
z-index: 1;
box-shadow: 0 0 70px rgba(0, 0, 0, 0.4);
}
.st-flyout-container.active-transforms .st-flyout-menu,
.st-flyout-container.active-transforms .st-flyout-main {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-backface-visibility: hidden;
Expand Down
2 changes: 1 addition & 1 deletion dist/css/Stashy.min.css
View file

Large diffs are not rendered by default.

7 changes: 6 additions & 1 deletion dist/js/Stashy.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -596,6 +596,11 @@ window.Modernizr = (function( window, document, undefined ) {
}
}

var isAndroidStockBrowser = function() {
var nua = navigator.userAgent;
return ((nua.indexOf('Mozilla/5.0') > -1 && nua.indexOf('Android ') > -1 && nua.indexOf('AppleWebKit') > -1) && !(nua.indexOf('Chrome') > -1));
}

flyout.prototype.layout = function() {
if (this.element == null) return;

Expand All @@ -612,7 +617,7 @@ window.Modernizr = (function( window, document, undefined ) {
else {
this.element.find(".st-flyout-container").addClass("st-push");
}
if (Modernizr && Modernizr.csstransforms3d) {
if (Modernizr && Modernizr.csstransforms3d && !isAndroidStockBrowser()) {
this.element.find(".st-flyout-container").addClass("active-transforms");
}

Expand Down
2 changes: 1 addition & 1 deletion dist/js/Stashy.min.js
View file

Large diffs are not rendered by default.

25 changes: 3 additions & 22 deletions docs/public/Content/Stashy.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -537,11 +537,6 @@
.st-offcanvas {
overflow: hidden;
width: 100%;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
}
.st-offcanvas * {
-webkit-box-sizing: border-box;
Expand Down Expand Up @@ -579,11 +574,6 @@
width: 100%;
display: block;
position: relative;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
}
.st-offcanvas.active-transitions .st-offcanvas-menu,
.st-offcanvas.active-transitions .st-offcanvas-main,
Expand Down Expand Up @@ -700,13 +690,6 @@
overflow: hidden;
width: 100%;
}
.st-flyout-container {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
}
.st-flyout-container * {
margin: 0;
-webkit-box-sizing: border-box;
Expand All @@ -718,11 +701,6 @@
overflow: hidden;
z-index: 0;
background: #cccccc;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
}
.st-flyout-container .st-flyout-menu a {
clear: both;
Expand All @@ -734,6 +712,9 @@
overflow: hidden;
z-index: 1;
box-shadow: 0 0 70px rgba(0, 0, 0, 0.4);
}
.st-flyout-container.active-transforms .st-flyout-menu,
.st-flyout-container.active-transforms .st-flyout-main {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-backface-visibility: hidden;
Expand Down
2 changes: 1 addition & 1 deletion docs/public/Content/styles.css
View file

Large diffs are not rendered by default.

7 changes: 6 additions & 1 deletion docs/public/Scripts/Stashy.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -590,6 +590,11 @@ window.Modernizr = (function( window, document, undefined ) {
}
}

var isAndroidStockBrowser = function() {
var nua = navigator.userAgent;
return ((nua.indexOf('Mozilla/5.0') > -1 && nua.indexOf('Android ') > -1 && nua.indexOf('AppleWebKit') > -1) && !(nua.indexOf('Chrome') > -1));
}

flyout.prototype.layout = function() {
if (this.element == null) return;

Expand All @@ -606,7 +611,7 @@ window.Modernizr = (function( window, document, undefined ) {
else {
this.element.find(".st-flyout-container").addClass("st-push");
}
if (Modernizr && Modernizr.csstransforms3d) {
if (Modernizr && Modernizr.csstransforms3d && !isAndroidStockBrowser()) {
this.element.find(".st-flyout-container").addClass("active-transforms");
}

Expand Down
2 changes: 1 addition & 1 deletion docs/public/Scripts/vendor.js
View file

Large diffs are not rendered by default.

19 changes: 10 additions & 9 deletions less/Stashy.Flyout.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,16 +13,12 @@
.box-sizing(border-box);
}

.translate3d(0,0,0);
.backface-visibility(hidden);

.st-flyout-menu {
clear: both;
overflow: hidden;
z-index:0;
background: @flyout-menu-background;
.translate3d(0,0,0);
.backface-visibility(hidden);
background: @flyout-menu-background;

a {
clear: both;
}
Expand All @@ -35,15 +31,20 @@
overflow: hidden;
z-index:1;
box-shadow: @flyout-boxshadow;
.translate3d(0,0,0);
.backface-visibility(hidden);
}

&.active-transforms {
.st-flyout-menu, .st-flyout-main {
.translate3d(0,0,0);
.backface-visibility(hidden);
}
}

.st-flyout-toggle {
font-size : @fontsize-base + 0.3em;
}

&.st-push {
&.st-push {
position: relative;
.transition(@flyout-transition);

Expand Down
4 changes: 0 additions & 4 deletions less/Stashy.OffCanvas.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,6 @@
.st-offcanvas {
overflow: hidden;
width : 100%;
.translate3d(0,0,0);
.backface-visibility(hidden);

* {
.box-sizing(border-box);
Expand Down Expand Up @@ -46,8 +44,6 @@
width: 100%;
display: block;
position: relative;
.translate3d(0,0,0);
.backface-visibility(hidden);
}

&.active-transitions {
Expand Down
7 changes: 6 additions & 1 deletion src/Stashy.Flyout.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,11 @@
}
}

var isAndroidStockBrowser = function() {
var nua = navigator.userAgent;
return ((nua.indexOf('Mozilla/5.0') > -1 && nua.indexOf('Android ') > -1 && nua.indexOf('AppleWebKit') > -1) && !(nua.indexOf('Chrome') > -1));
}

flyout.prototype.layout = function() {
if (this.element == null) return;

Expand All @@ -63,7 +68,7 @@
else {
this.element.find(".st-flyout-container").addClass("st-push");
}
if (Modernizr && Modernizr.csstransforms3d) {
if (Modernizr && Modernizr.csstransforms3d && !isAndroidStockBrowser()) {
this.element.find(".st-flyout-container").addClass("active-transforms");
}

Expand Down

0 comments on commit a15dad2

Please sign in to comment.