Merge pull request codemirror#9 from adobe/scrollfix-lion

Fixes for scrolling in Lion

lib/codemirror.css

@@ -22,9 +22,6 @@
   /* This corrects for the 1px gap introduced to the left of the scrollbar
      by the rule for .CodeMirror-scrollbar-inner. */
   margin-left: -1px;
-
-  /* Ensure that the scrollbar appears in Lion. */
-  min-width: 12px;
 }
 
 .CodeMirror-scrollbar-inner {
@@ -33,6 +30,16 @@
   width: 1px;
 }
 
+.CodeMirror-scrollbar.cm-overlap {   
+  /* Ensure that the scrollbar appears in Lion, and that it overlaps the content
+     rather than sitting to the right of it. */
+  position: absolute;
+  z-index: 1;
+  float: none;
+  right: 0;
+  min-width: 12px;
+}
+
 .CodeMirror-gutter {
   position: absolute; left: 0; top: 0;
   z-index: 10;

lib/codemirror.js

@@ -50,6 +50,13 @@ var CodeMirror = (function() {
     if (!webkit) lineSpace.draggable = true;
     if (options.tabindex != null) input.tabIndex = options.tabindex;
     if (!options.gutter && !options.lineNumbers) gutter.style.display = "none";
+
+    // Check for OS X >= 10.7. If so, we need to force a width on the scrollbar, and 
+    // make it overlap the content.
+    var osxMatch = /Mac OS X 10\D([\d+])\D/.exec(navigator.userAgent);
+    if (osxMatch && osxMatch[1] && Number(osxMatch[1]) >= 7) {
+      scrollbar.className += " cm-overlap";
+    }
 
     // Check for problem with IE innerHTML not working when we have a
     // P (or similar) parent node.