Fix compositing issues in Safari (#1029, #1154)

leongersen · Oct 9, 2021 · a1f8f17 · a1f8f17
1 parent 4a69afe
commit a1f8f17
Show file tree

Hide file tree

Showing 4 changed files with 87 additions and 11 deletions.
diff --git a/src/nouislider.core.less b/src/nouislider.core.less
@@ -39,20 +39,14 @@
 	z-index: 1;
 	top: 0;
 	right: 0;
+	height: 100%;
+	width: 100%;
 	-ms-transform-origin: 0 0;
 	-webkit-transform-origin: 0 0;
 	-webkit-transform-style: preserve-3d;
 	transform-origin: 0 0;
 	transform-style: flat;
 }
-.@{noUi-css-prefix}-connect {
-	height: 100%;
-	width: 100%;
-}
-.@{noUi-css-prefix}-origin {
-	height: 10%;
-	width: 10%;
-}
 
 /* Offset direction
  */
@@ -65,6 +59,7 @@
  * connect elements.
  */
 .@{noUi-css-prefix}-vertical .@{noUi-css-prefix}-origin {
+	top: -100%;
 	width: 0;
 }
 .@{noUi-css-prefix}-horizontal .@{noUi-css-prefix}-origin {
@@ -106,7 +101,7 @@
 	width: 28px;
 	height: 34px;
 	right: -6px;
-	top: -17px;
+	bottom: -17px;
 }
 .@{noUi-css-prefix}-txt-dir-rtl.@{noUi-css-prefix}-horizontal .@{noUi-css-prefix}-handle {
 	left: -17px;

diff --git a/src/nouislider.ts b/src/nouislider.ts
@@ -2604,7 +2604,7 @@ function scope(target: TargetElement, options: ParsedOptions, originalOptions: O
         // Convert the value to the slider stepping/range.
         scope_Values[handleNumber] = scope_Spectrum.fromStepping(to);
 
-        const translation = 10 * (transformDirection(to, 0) - scope_DirOffset);
+        const translation = transformDirection(to, 0) - scope_DirOffset;
         const translateRule = "translate(" + inRuleOrder(translation + "%", "0") + ")";
 
         (scope_Handles[handleNumber].style as CSSStyleDeclarationIE10)[options.transformRule] = translateRule;

diff --git a/tests/origin.html b/tests/origin.html
@@ -0,0 +1,81 @@
+<!DOCTYPE html>
+
+<!--
+    Test case for https://github.com/leongersen/noUiSlider/issues/987 and related.
+
+    Test by making sure the origin element on the vertical slider does not increase the page length.
+-->
+<html dir="ltr">
+<head>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link href="/nouislider/dist/nouislider.css" rel="stylesheet">
+
+    <style>
+        #slider1 {
+            width: 250px;
+        }
+
+        #slider2 {
+            height: 250px;
+        }
+
+        .boxes {
+            display: flex;
+            margin: 50px auto;
+        }
+
+        .box {
+            padding: 50px;
+        }
+
+        .noUi-origin {
+            background: rgba(255, 0, 0, 0.5);
+        }
+
+        .noUi-horizontal .noUi-origin {
+            height: 50px !important;
+        }
+
+        .noUi-vertical .noUi-origin {
+            width: 50px !important;
+        }
+
+    </style>
+</head>
+
+<body>
+<div class="boxes">
+    <div class="box">
+        <div class="slider" id="slider1"></div>
+    </div>
+    <div class="box">
+        <div class="slider" id="slider2"></div>
+    </div>
+</div>
+
+<script src="/nouislider/dist/nouislider.js"></script>
+
+<script>
+    var slider1 = document.getElementById("slider1");
+    noUiSlider.create(slider1, {
+        start: [5],
+        step: 1,
+        range: {
+            min: [0],
+            max: [10]
+        }
+    });
+
+    var slider2 = document.getElementById("slider2");
+    noUiSlider.create(slider2, {
+        start: [5],
+        orientation: "vertical",
+        step: 1,
+        range: {
+            min: [0],
+            max: [10]
+        }
+    });
+</script>
+</body>
+</html>
diff --git a/tests/slider_three_or_more_handles.js b/tests/slider_three_or_more_handles.js
@@ -54,7 +54,7 @@ QUnit.test("Slider with three or more handles", function (assert) {
     var middleHandleX = (middleHandlePos.right + middleHandlePos.left) / 2;
     var middleHandleY = (middleHandlePos.top + middleHandlePos.bottom) / 2;
     var selectedByClick = document.elementFromPoint(middleHandleX, middleHandleY);
-    assert.strictEqual(selectedByClick, middleHandle, "Middle handle should be selected by click as rightmost handle is unmovable move");
+    assert.strictEqual(selectedByClick, middleHandle.querySelector('.noUi-touch-area'), "Middle handle should be selected by click as rightmost handle is unmovable move");
 
 
     // xnakos also spotted a bug where clicking