fix: support proper translate-z (and general 3D) behavior in Chrome

Famous · Aug 6, 2014 · 1f82bd9 · 1f82bd9
1 parent 371dfef
commit 1f82bd9
Show file tree

Hide file tree

Showing 7 changed files with 21 additions and 9 deletions.
diff --git a/dist/famous-angular.css b/dist/famous-angular.css
@@ -32,8 +32,13 @@ fa-app, .fa-app {
     width: 100%;
 }
 
-.famous-angular-container {
+.famous-angular-clipping-container {
     overflow: hidden;
+    width: 100%;
+    height: 100%;
+}
+
+.famous-angular-container {
     -webkit-transform-style: preserve-3d;
     transform-style: preserve-3d;
     -webkit-backface-visibility: visible;

diff --git a/dist/famous-angular.js b/dist/famous-angular.js
@@ -1555,8 +1555,7 @@ angular.module('famous.angular')
             var Engine = $famous['famous/core/Engine'];
             var Transform = $famous['famous/core/Transform'];
 
-
-            element.append('<div class="famous-angular-container"></div>');
+            element.append('<div class="famous-angular-clipping-container"><div class="famous-angular-container"></div></div>');
             isolate.context = Engine.createContext(element[0].querySelector('.famous-angular-container'));
             window.context = isolate.context;
             var _updatePerspective = function(){

diff --git a/dist/famous-angular.min.css b/dist/famous-angular.min.css
diff --git a/dist/famous-angular.min.js b/dist/famous-angular.min.js
diff --git a/gulpfile.js b/gulpfile.js
@@ -112,14 +112,18 @@ gulp.task('docs', ['build'], function(done) {
  * Watch task for developing with the famous-angular-examples submodule
  ***********************************************************************/
 gulp.task('build-to-examples', ['clean', 'build'], function(event) {
-  return gulp.src([
+  gulp.src([
     'src/scripts/module.js',
     'src/scripts/services/**/*.js',
     'src/scripts/directives/**/*.js'
   ])
   .pipe(concat('famous-angular.js'))
+  .pipe(gulp.dest(EXAMPLES_DIR + 'app/bower_components/famous-angular/dist/'));
+
+  return gulp.src('src/styles/famous-angular.css')
   .pipe(gulp.dest(EXAMPLES_DIR + 'app/bower_components/famous-angular/dist/'))
   .pipe(notify({ message: 'Build task complete' }));
+
 })
 
 // Watch

diff --git a/src/scripts/directives/fa-app.js b/src/scripts/directives/fa-app.js
@@ -85,8 +85,7 @@ angular.module('famous.angular')
             var Engine = $famous['famous/core/Engine'];
             var Transform = $famous['famous/core/Transform'];
 
-
-            element.append('<div class="famous-angular-container"></div>');
+            element.append('<div class="famous-angular-clipping-container"><div class="famous-angular-container"></div></div>');
             isolate.context = Engine.createContext(element[0].querySelector('.famous-angular-container'));
             window.context = isolate.context;
             var _updatePerspective = function(){

diff --git a/src/styles/famous-angular.css b/src/styles/famous-angular.css
@@ -26,8 +26,13 @@ fa-app, .fa-app {
     width: 100%;
 }
 
-.famous-angular-container {
+.famous-angular-clipping-container {
     overflow: hidden;
+    width: 100%;
+    height: 100%;
+}
+
+.famous-angular-container {
     -webkit-transform-style: preserve-3d;
     transform-style: preserve-3d;
     -webkit-backface-visibility: visible;