diff --git a/IPython/html/static/base/js/page.js b/IPython/html/static/base/js/page.js
index 355f71e61..ea35027b8 100644
--- a/IPython/html/static/base/js/page.js
+++ b/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.
diff --git a/IPython/html/static/base/less/page.less b/IPython/html/static/base/less/page.less
index c58166187..6f249b2a5 100644
--- a/IPython/html/static/base/less/page.less
+++ b/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 */
diff --git a/IPython/html/static/edit/js/main.js b/IPython/html/static/edit/js/main.js
index 61822e3cd..4a2731082 100644
--- a/IPython/html/static/edit/js/main.js
+++ b/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);
diff --git a/IPython/html/static/notebook/js/scrollmanager.js b/IPython/html/static/notebook/js/scrollmanager.js
index 788d2c543..552b326e8 100644
--- a/IPython/html/static/notebook/js/scrollmanager.js
+++ b/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
};
diff --git a/IPython/html/static/notebook/less/menubar.less b/IPython/html/static/notebook/less/menubar.less
index e9827d07d..7f776c035 100644
--- a/IPython/html/static/notebook/less/menubar.less
+++ b/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 {
diff --git a/IPython/html/static/style/style.min.css b/IPython/html/static/style/style.min.css
index 8b1e36427..6d548c516 100644
--- a/IPython/html/static/style/style.min.css
+++ b/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;