Merge pull request #2102 from paulkaplan/monitor-flicker

Fix several minor monitor issues from recent testing

src/components/monitor-list/monitor-list.jsx

@@ -10,7 +10,12 @@ import styles from './monitor-list.css';
 const stageSizeToTransform = ({width, height, widthDefault, heightDefault}) => {
     const scaleX = width / widthDefault;
     const scaleY = height / heightDefault;
-    return `scale(${scaleX},${scaleY})`;
+    if (scaleX === 1 && scaleY === 1) {
+        // Do not set a transform if the scale is 1 because
+        // it messes up `position: fixed` elements like the context menu.
+        return;
+    }
+    return {transform: `scale(${scaleX},${scaleY})`};
 };
 
 const MonitorList = props => (
@@ -24,9 +29,7 @@ const MonitorList = props => (
     >
         <Box
             className={styles.monitorListScaler}
-            style={{
-                transform: stageSizeToTransform(props.stageSize)
-            }}
+            style={stageSizeToTransform(props.stageSize)}
         >
             {props.monitors.valueSeq().filter(m => m.visible)
                 .map(monitorData => (

src/components/monitor/monitor.css

@@ -60,6 +60,11 @@
     flex-direction: row;
 }
 
+.slider {
+    width: 100%;
+    transform: translateZ(0); /* Fixes flickering in Safari */
+}
+
 .list-monitor {
     display: flex;
     flex-direction: column;
@@ -81,7 +86,6 @@
     width: 100%;
     display: flex;
     flex-direction: column;
-    overflow-y: scroll;
     overflow-x: hidden;
     height: calc(100% - 44px);
 }
@@ -150,12 +154,13 @@
     outline: none;
     font-size: 0.75rem;
     font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+    width: 100%;
 }
 
 .remove-button {
     position: absolute;
     top: 4px;
-    right: 3px;
+    right: 6px;
     cursor: pointer;
     color: $ui-white;
 }

src/components/monitor/slider-monitor.jsx

 import React from 'react';
 import PropTypes from 'prop-types';
+import classNames from 'classnames';
+
 import styles from './monitor.css';
 
 const SliderMonitor = ({categoryColor, label, min, max, value, onSliderUpdate}) => (
@@ -17,13 +19,12 @@ const SliderMonitor = ({categoryColor, label, min, max, value, onSliderUpdate})
         </div>
         <div className={styles.row}>
             <input
-                className="no-drag" // Class used on parent Draggable to prevent drags
+                className={classNames(styles.slider, 'no-drag')} // Class used on parent Draggable to prevent drags
                 max={max}
                 min={min}
                 type="range"
                 value={value}
                 onChange={onSliderUpdate}
-                // @todo onChange callback
             />
         </div>