Slider tooltip: fix arrow rendering artefact in some zoom levels (#25986

) Co-authored-by: Alexander Bulychev <[email protected]>
DevExpress · Nov 13, 2023 · c1b91ee · c1b91ee
1 parent 5f5d23c
commit c1b91ee
Show file tree

Hide file tree

Showing 6 changed files with 8 additions and 3 deletions.
diff --git a/packages/devextreme/scss/widgets/fluent/tooltip/_index.scss b/packages/devextreme/scss/widgets/fluent/tooltip/_index.scss
@@ -12,6 +12,7 @@
   .dx-overlay-content {
     background-color: $tooltip-bg;
     color: $tooltip-color;
+    border: 1px solid transparent;
     border-radius: $tooltip-border-radius;
     min-height: auto;
 

diff --git a/packages/devextreme/scss/widgets/fluent/tooltip/_sizes.scss b/packages/devextreme/scss/widgets/fluent/tooltip/_sizes.scss
@@ -9,11 +9,11 @@ $fluent-tooltip-arrow-border-radius: 2px !default;
 $fluent-tooltip-shadow: 0 0 2px 0 $base-dropdown-shadow-color1 !default;
 
 @if $size == "default" {
-  $fluent-tooltip-padding: 8px 12px !default;
+  $fluent-tooltip-padding: 7px 11px !default;
   $fluent-tooltip-font-size: 12px;
 }
 
 @else if $size == "compact" {
-  $fluent-tooltip-padding: 4px 6px !default;
+  $fluent-tooltip-padding: 3px 5px !default;
   $fluent-tooltip-font-size: 12px;
 }
diff --git a/packages/devextreme/scss/widgets/material/slider/_index.scss b/packages/devextreme/scss/widgets/material/slider/_index.scss
@@ -75,11 +75,12 @@ $material-slider-tooltip-width-without-paddings: $material-slider-tooltip-width
     }
 
     .dx-overlay-content {
-      border: none;
+      border: 1px solid transparent;
       opacity: 0.6;
 
       .dx-popup-content {
         line-height: normal;
+        padding: $material-slider-tooltip-popup-content-padding;
 
         .dx-slider-tooltip-position-top & {
           padding-top: 6px;

diff --git a/packages/devextreme/scss/widgets/material/slider/_sizes.scss b/packages/devextreme/scss/widgets/material/slider/_sizes.scss
@@ -6,6 +6,7 @@ $material-slider-handle-size: null !default;
 $material-slider-wrapper-height: null !default;
 $material-slider-tooltip-width: null !default;
 $material-slider-top-tooltip-margin: null !default;
+$material-slider-tooltip-popup-content-padding: null !default;
 
 $material-slider-track-height: 2px !default;
 $material-slider-height: 28px !default;
@@ -15,11 +16,13 @@ $material-slider-height: 28px !default;
   $material-slider-wrapper-height: 32px !default;
   $material-slider-tooltip-width: 34px !default;
   $material-slider-top-tooltip-margin: -5px !default;
+  $material-slider-tooltip-popup-content-padding: 5px 7px !default;
 }
 
 @else if $size == "compact" {
   $material-slider-handle-size: 26px !default;
   $material-slider-wrapper-height: 26px !default;
   $material-slider-tooltip-width: 28px !default;
   $material-slider-top-tooltip-margin: -2px !default;
+  $material-slider-tooltip-popup-content-padding: 3px 5px !default;
 }
diff --git a/...testcafe/tests/editors/slider/etalons/slider-appearance (fluent-blue-light).png b/...testcafe/tests/editors/slider/etalons/slider-appearance (fluent-blue-light).png
diff --git a/...stcafe/tests/editors/slider/etalons/slider-appearance (material-blue-light).png b/...stcafe/tests/editors/slider/etalons/slider-appearance (material-blue-light).png