🐛 Use a border to offset the visible area instead of a transform

Closes #484
atom-minimap · May 27, 2016 · 8e65b93 · 8e65b93
1 parent 6ab2761
commit 8e65b93
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 5 deletions.
diff --git a/lib/minimap-element.js b/lib/minimap-element.js
@@ -792,13 +792,14 @@ export default class MinimapElement {
         width: visibleWidth + 'px',
         height: minimap.getTextEditorScaledHeight() + 'px',
         top: visibleAreaTop + 'px',
-        left: visibleAreaLeft + 'px'
+        'border-left-width': visibleAreaLeft + 'px'
       })
     } else {
       this.applyStyles(this.visibleArea, {
         width: visibleWidth + 'px',
         height: minimap.getTextEditorScaledHeight() + 'px',
-        transform: this.makeTranslate(visibleAreaLeft, visibleAreaTop)
+        transform: this.makeTranslate(0, visibleAreaTop),
+        'border-left-width': visibleAreaLeft + 'px'
       })
     }
 

diff --git a/spec/minimap-element-spec.js b/spec/minimap-element-spec.js
@@ -479,7 +479,9 @@ describe('MinimapElement', () => {
 
         it('updates the visible area', () => {
           expect(realOffsetTop(visibleArea)).toBeCloseTo(minimap.getTextEditorScaledScrollTop() - minimap.getScrollTop(), 0)
-          expect(realOffsetLeft(visibleArea)).toBeCloseTo(minimap.getTextEditorScaledScrollLeft(), 0)
+
+          expect(parseFloat(visibleArea.style.borderLeftWidth))
+          .toEqual(Math.floor(minimap.getTextEditorScaledScrollLeft()))
         })
       })
 

diff --git a/styles/minimap.less b/styles/minimap.less
@@ -65,13 +65,23 @@ atom-text-editor::shadow, atom-text-editor, html {
       .minimap-visible-area {
         position: absolute;
         display: block;
-        background-color: #888;
-        opacity: .2;
         cursor: -webkit-grab;
 
+        border-left: 0px solid rgba(127, 127, 127, 0.1);
+
         &:active {
           cursor: -webkit-grabbing;
         }
+
+        &::after {
+          content: '';
+          position: absolute;
+          top: 0;
+          left: 0;
+          right: 0;
+          bottom: 0;
+          background-color: rgba(127, 127, 127, 0.2);
+        }
       }
 
       .minimap-controls {