fix(picker): fixed issue with scrolling on chrome

framework7io · Jan 18, 2023 · 816898d · 816898d
1 parent fe800cf
commit 816898d
Showing 1 changed file with 36 additions and 33 deletions.
diff --git a/src/core/components/picker/picker.less b/src/core/components/picker/picker.less
@@ -38,44 +38,47 @@
   text-align: right;
   height: 100%;
   position: relative;
-  -webkit-mask-box-image: linear-gradient(
-    to top,
-    transparent,
-    transparent 5%,
-    white 20%,
-    white 80%,
-    transparent 95%,
-    transparent
-  );
   font-size: var(--f7-picker-column-font-size);
-}
-.picker-column {
-  position: relative;
-  max-height: 100%;
-  &.picker-column-first:before,
-  &.picker-column-last:after {
-    height: 100%;
-    width: 100vw;
-    position: absolute;
+  .popover & {
+    border-radius: 0 0 var(--f7-popover-border-radius) var(--f7-popover-border-radius);
+  }
+  &::before,
+  &::after {
     content: '';
+    position: absolute;
+    left: 0;
+    width: 100%;
+    height: 20%;
+    z-index: 100;
+    pointer-events: none;
+  }
+  --f7-picker-mask-bg-color: transparent;
+  .page & {
+    --f7-picker-mask-bg-color: var(--f7-page-bg-color);
+  }
+  .block-strong & {
+    --f7-picker-mask-bg-color: var(--f7-block-strong-bg-color);
+  }
+  .picker-sheet & {
+    --f7-picker-mask-bg-color: var(--f7-picker-sheet-bg-color, var(--f7-sheet-bg-color));
+  }
+  .picker-popover & {
+    --f7-picker-mask-bg-color: var(--f7-popover-bg-color);
+  }
+  &::before {
     top: 0;
+    background-image: linear-gradient(to bottom, var(--f7-picker-mask-bg-color), transparent);
   }
-  &.picker-column-first:before {
-    .ltr({
-      right: 100%;
-    });
-    .rtl({
-      left: 100%;
-    });
-  }
-  &.picker-column-last:after {
-    .ltr({
-      left: 100%;
-    });
-    .rtl({
-      right: 100%;
-    });
+  &::after {
+    bottom: 0;
+    background-image: linear-gradient(to top, var(--f7-picker-mask-bg-color), transparent);
   }
+}
+.picker-column {
+  position: relative;
+  max-height: 100%;
+  z-index: 10;
+
   &.picker-column-left {
     text-align: left;
   }