diff --git a/src/app/atoms/scroll/_scrollbar.scss b/src/app/atoms/scroll/_scrollbar.scss index 6dc5b46..11c2dc8 100644 --- a/src/app/atoms/scroll/_scrollbar.scss +++ b/src/app/atoms/scroll/_scrollbar.scss @@ -1,3 +1,5 @@ +@use '../../partials/dir'; + .firefox-scrollbar { scrollbar-width: thin; scrollbar-color: var(--bg-surface-hover) transparent; @@ -30,6 +32,12 @@ } } +@mixin paddingForSafari($padding) { + @media not all and (min-resolution:.001dpcm) { + @include dir.side(padding, 0, $padding); + } +} + @mixin scroll { overflow: hidden; // Below code stop scroll when x-scrollable content come in timeline @@ -38,6 +46,7 @@ @extend .webkit-scrollbar; @extend .webkit-scrollbar-track; @extend .webkit-scrollbar-thumb; + @include paddingForSafari(var(--sp-extra-tight)); } @mixin scroll__h { @@ -58,6 +67,8 @@ @mixin scroll--invisible { -ms-overflow-style: none; scrollbar-width: none; + @include paddingForSafari(0); + &::-webkit-scrollbar { display: none; }