From 174c4e18ccd14de454da31c2f1b41e07b548eb98 Mon Sep 17 00:00:00 2001
From: Nathan Sobo <nathan@github.com>
Date: Fri, 16 Mar 2012 05:41:43 -0600
Subject: [PATCH] Fix scrolling misbehavior and display artifacts.

Switching back to the new flexbox and re-introducing a scrollable-content node that the flexbox is applied to. This has no height settings so it grows to contains the gutter and lines. The editor outside of it has a width / height of 100% of its container plus overflow-y of scroll. Trying to apply flexbox AND a 100% height + scroll all to the editor causes display artifacts.
---
 src/atom/editor.coffee |  9 +++++----
 static/atom.css        |  2 ++
 static/editor.css      | 13 ++++++-------
 3 files changed, 13 insertions(+), 11 deletions(-)

diff --git a/src/atom/editor.coffee b/src/atom/editor.coffee
index e2463f593..93f8a15c7 100644
--- a/src/atom/editor.coffee
+++ b/src/atom/editor.coffee
@@ -18,10 +18,11 @@ class Editor extends View
 
   @content: ->
     @div class: 'editor', tabindex: -1, =>
-      @subview 'gutter', new Gutter
-      @div class: 'horizontal-scroller', outlet: 'horizontalScroller', =>
-        @div class: 'lines', outlet: 'lines', =>
-          @input class: 'hidden-input', outlet: 'hiddenInput'
+      @div class: 'scrollable-content', =>
+        @subview 'gutter', new Gutter
+        @div class: 'horizontal-scroller', outlet: 'horizontalScroller', =>
+          @div class: 'lines', outlet: 'lines', =>
+            @input class: 'hidden-input', outlet: 'hiddenInput'
 
   vScrollMargin: 2
   hScrollMargin: 10
diff --git a/static/atom.css b/static/atom.css
index ab16fe004..4ff987366 100644
--- a/static/atom.css
+++ b/static/atom.css
@@ -10,6 +10,8 @@ body {
 
 #root-view {
   height: 100%;
+  height: 100%;
+  overflow-y: auto;
   position: relative;
   background-image: url(static/images/linen.png);
 }
diff --git a/static/editor.css b/static/editor.css
index 7535448c0..490c1f0ce 100644
--- a/static/editor.css
+++ b/static/editor.css
@@ -1,18 +1,17 @@
 .editor {
-  display: -webkit-box;
-  font: 18px Inconsolata, Monaco, Courier !important;
-  position: relative;
-  width: 100%;
   height: 100%;
   background: #333;
+  font: 18px Inconsolata, Monaco, Courier !important;
   color: white;
   cursor: default;
   overflow-y: auto;
-  overflow-x: auto;
-
   -webkit-user-select: none;
 }
 
+.editor .scrollable-content {
+  display: -webkit-flexbox;
+}
+
 .editor.single-line {
   overflow-y: hidden;
 }
@@ -30,7 +29,7 @@
 
 .editor .horizontal-scroller {
   overflow-x: auto;
-  -webkit-box-flex: 1;
+  width: -webkit-flex(1);
 }
 
 .editor.soft-wrap .horizontal-scroller {