Solves slider and image positioning problem in Firefox (#109)

* Solves issue #108 : Swipe and Onion skin slider not showing in Firefox

* Adding a comment to explain the Firefox display 'hack'

* Solves the image positioning problem with Swipe in Firefox

* Removed dotted outline in Firefox

Author: xuv

webdiff/static/css/style.css

@@ -115,6 +115,15 @@ ul.file-list {
 .onion-skin input {
   width: 200px;
 }
+.swipe input,
+.onion-skin input {
+  background-color: transparent; /* So it displays in Firefox */
+  margin: 0;
+}
+/* Remove dotted outline in Firefox*/
+input::-moz-focus-outer{
+  border: 0;
+}
 .shrink-to-fit {
   max-width: 100%;
 }

webdiff/static/js/image.jsx

@@ -428,7 +428,7 @@ var ImageSwipe = React.createClass({
         left: Math.floor(frac * imB.width) + 'px',
         width: null,
         right: containerWidth - imB.width + 'px',
-        'backgroundPositionX': -Math.floor(frac * imB.width) + 'px'
+        'backgroundPosition': -Math.floor(frac * imB.width) + 'px top'
       });
     } else {
       _.extend(styleB, {opacity: frac});
@@ -440,9 +440,6 @@ var ImageSwipe = React.createClass({
       if (_.has(o, 'backgroundSize')) {
         o['backgroundSize'] += ', auto auto';
       }
-      if (_.has(o, 'backgroundPositionX')) {
-        o['backgroundPositionX'] += ', ' + o['backgroundPositionX'];
-      }
     });
 
     return (