Merge pull request #7557 from minrk/different-resize

don't use flexbox to size `#site`

IPython/html/static/base/js/page.js

@@ -10,14 +10,20 @@ define([
 
     var Page = function () {
         this.bind_events();
-
-        // When the page is ready, resize the header.
-        var that = this;
-        $(function() { that._resize_header(); });
     };
 
     Page.prototype.bind_events = function () {
-        events.on('resize-header.Page', $.proxy(this._resize_header, this));
+        // resize site on:
+        // - window resize
+        // - header change
+        // - page load
+        var _handle_resize = $.proxy(this._resize_site, this);
+        
+        $(window).resize(_handle_resize);
+
+        // On document ready, resize codemirror.
+        $(document).ready(_handle_resize);
+        events.on('resize-header.Page', _handle_resize);
     };
 
     Page.prototype.show = function () {
@@ -44,12 +50,13 @@ define([
          * Main scripts should call this method after styling everything.
          * TODO: selector are hardcoded, pass as constructor argument
          */
-        $('div#site').css('display','block');
+        $('div#site').css('display', 'block');
+        this._resize_site();
     };
 
-    Page.prototype._resize_header = function() {
-        // Update the header's size.
-        $('#header-spacer').height($('#header').height());
+    Page.prototype._resize_site = function() {
+        // Update the site's size.
+        $('div#site').height(window.innerHeight - $('#header').height());
     };
 
     // Register self in the global namespace for convenience.

IPython/html/static/base/less/page.less

@@ -14,9 +14,6 @@ body {
     right: 0px;
     top: 0px;
     bottom: 0px;
-    @media not print {
-      .vbox();
-    }
     overflow: visible;
 }
 
@@ -81,14 +78,16 @@ body {
 }
 
 #site {
+    // avoid repaints on size with translateZ(0)
+    -webkit-transform: translateZ(0);
+    -moz-transform: translateZ(0);
+    -ms-transform: translateZ(0);
+    -o-transform: translateZ(0);
+    transform: translateZ(0);
     width: 100%;
     display: none;
     .border-box-sizing();
     overflow: auto;
-    @media not print {
-      flex: 1;
-      height: 0px; // triggers overflow, but overridded by flex
-    }
 }
 
 /* Smaller buttons */

IPython/html/static/edit/js/main.js

@@ -90,7 +90,7 @@ require([
         // height twice.  Once for top padding and once for bottom padding.
         $('div.CodeMirror').height(window.innerHeight - header.height() - 2*header_margin_bottom);
     };
-    window.onresize = _handle_resize;
+    $(window).resize(_handle_resize);
 
     // On document ready, resize codemirror.
     $(document).ready(_handle_resize);

IPython/html/static/notebook/js/scrollmanager.js

@@ -8,7 +8,7 @@ define(['jquery'], function($){
          * Public constructor.
          */
         this.notebook = notebook;
-        this.element = $('body');
+        this.element = $('#site');
         options = options || {};
         this.animation_speed = options.animation_speed || 250; //ms
     };

IPython/html/static/notebook/less/menubar.less

@@ -5,7 +5,7 @@
   .navbar {
     border-top: 1px;
     border-radius: 0px 0px @border-radius-base @border-radius-base;
-    margin-bottom: -1px;
+    margin-bottom: 0px;
   }
   
   .navbar-toggle {

IPython/html/static/style/style.min.css

@@ -8267,24 +8267,6 @@ body {
   bottom: 0px;
   overflow: visible;
 }
-@media not print {
-  body {
-    /* Old browsers */
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
-    -webkit-box-align: stretch;
-    display: -moz-box;
-    -moz-box-orient: vertical;
-    -moz-box-align: stretch;
-    display: box;
-    box-orient: vertical;
-    box-align: stretch;
-    /* Modern browsers */
-    display: flex;
-    flex-direction: column;
-    align-items: stretch;
-  }
-}
 #header {
   /* Initially hidden to prevent FLOUC */
   display: none;
@@ -8342,6 +8324,11 @@ body {
   height: 28px;
 }
 #site {
+  -webkit-transform: translateZ(0);
+  -moz-transform: translateZ(0);
+  -ms-transform: translateZ(0);
+  -o-transform: translateZ(0);
+  transform: translateZ(0);
   width: 100%;
   display: none;
   box-sizing: border-box;
@@ -8349,12 +8336,6 @@ body {
   -webkit-box-sizing: border-box;
   overflow: auto;
 }
-@media not print {
-  #site {
-    flex: 1;
-    height: 0px;
-  }
-}
 /* Smaller buttons */
 .ui-button .ui-button-text {
   padding: 0.2em 0.8em;
@@ -10340,7 +10321,7 @@ select[multiple].celltoolbar select {
 #menubar .navbar {
   border-top: 1px;
   border-radius: 0px 0px 2px 2px;
-  margin-bottom: -1px;
+  margin-bottom: 0px;
 }
 #menubar .navbar-toggle {
   float: left;