Skip to content
This repository has been archived by the owner on Aug 30, 2018. It is now read-only.

Rendering performance optimizations, promote-layer mixin #429

Merged
merged 5 commits into from Sep 16, 2015
Merged

Rendering performance optimizations, promote-layer mixin #429

Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
f42b3c5
Prevent touch scrolling wonkiness on Chrome for Android
benknight May 11, 2015
820f486
Hardware-accelerating drawers
benknight May 12, 2015
d378712
Merge remote-tracking branch 'upstream/master'
benknight May 26, 2015
d45bd67
Merge branch 'master' of https://github.com/Shopify/Timber
benknight Jun 4, 2015
8a8cc61
Adding promote-layer mixin
benknight Jun 4, 2015
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
11 changes: 11 additions & 0 deletions assets/timber.scss.liquid
View file
Open in desktop
Expand Up @@ -243,6 +243,14 @@ $socialIconFontStack: 'icons';
}
}

/*============================================================================
Layer promotion mixin for creating smoother animations with higher FPS.
==============================================================================*/
@mixin promote-layer($properties: transform) {
-webkit-transform: translateZ(0); // translateZ hack
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Any way/need to add an IE solution to this? I've never really thought about it until now

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

When it comes to the rendering optimization game IE's pretty much left out of the conversation since, as far as I know, they have never (historically) offered these kind of tools to developers, nor any insight into how their rendering engine actually works. However, the beauty of the standardized will-change property, as opposed to translateZ, is it's not implementation specific, and so any rendering optimization that IE does build should be based off of this property, making this code "future-proof".

will-change: $properties; // spec
}

/*============================================================================
Dependency-free breakpoint mixin
- Based on http://blog.grayghostvisuals.com/sass/sass-media-query-mixin/
Expand Down Expand Up @@ -2047,9 +2055,11 @@ label.error {
==============================================================================*/
.js-drawer-open {
overflow: hidden;
height: 100%;
}

.drawer {
@include promote-layer();
display: none;
position: fixed;
overflow-y: auto;
Expand Down Expand Up @@ -2114,6 +2124,7 @@ label.error {
}

.is-moved-by-drawer {
@include promote-layer();
transition: $drawerTransition;

.js-drawer-open-left & {
Expand Down