Force scrollbars to be GPU layers when acceleration is enabled

Fixes #3559

For some reason, Chromium 37 is not compositing scrollbars correctly on
secondary monitors in OS X. They’re invisible when the lines layer
extends beneath the scrollbars unless we apply this style.

src/editor-component.coffee

@@ -128,6 +128,7 @@ EditorComponent = React.createClass
           scrollableInOppositeDirection: verticallyScrollable
           verticalScrollbarWidth: verticalScrollbarWidth
           horizontalScrollbarHeight: horizontalScrollbarHeight
+          useHardwareAcceleration: @useHardwareAcceleration
 
       ScrollbarComponent
         ref: 'verticalScrollbar'
@@ -140,6 +141,7 @@ EditorComponent = React.createClass
         scrollableInOppositeDirection: horizontallyScrollable
         verticalScrollbarWidth: verticalScrollbarWidth
         horizontalScrollbarHeight: horizontalScrollbarHeight
+        useHardwareAcceleration: @useHardwareAcceleration
 
       # Also used to measure the height/width of scrollbars after the initial render
       ScrollbarCornerComponent

src/scrollbar-component.coffee

@@ -9,9 +9,11 @@ ScrollbarComponent = React.createClass
   render: ->
     {orientation, className, scrollHeight, scrollWidth, visible} = @props
     {scrollableInOppositeDirection, horizontalScrollbarHeight, verticalScrollbarWidth} = @props
+    {useHardwareAcceleration} = @props
 
     style = {}
     style.display = 'none' unless visible
+    style.transform = 'translateZ(0)' if useHardwareAcceleration # See atom/atom#3559
     switch orientation
       when 'vertical'
         style.width = verticalScrollbarWidth