From dd66d8ac5e3cbc182eefac20e7473e4f694844df Mon Sep 17 00:00:00 2001 From: emyarod Date: Tue, 27 Apr 2021 10:11:41 -0500 Subject: [PATCH] fix(modal): add safari media query for overflow indicator --- .../components/src/components/modal/_modal.scss | 14 ++++++++++++-- 1 file changed, 12 insertions(+), 2 deletions(-) diff --git a/packages/components/src/components/modal/_modal.scss b/packages/components/src/components/modal/_modal.scss index 84f810175461..a4f189bfdc32 100644 --- a/packages/components/src/components/modal/_modal.scss +++ b/packages/components/src/components/modal/_modal.scss @@ -285,12 +285,22 @@ grid-column: 1/-1; width: 100%; height: rem(32px); - // Safari interprets `transparent` differently, so make color token value transparent instead: - background-image: linear-gradient(to bottom, rgba($layer, 0), $layer); + background-image: linear-gradient(to bottom, transparent, $layer); content: ''; pointer-events: none; } + // Safari-only media query + // won't appear correctly with CSS custom properties + // see: code snippet and tabs overflow indicators + @media not all and (min-resolution: 0.001dpcm) { + @supports (-webkit-appearance: none) and (stroke-color: transparent) { + .#{$prefix}--modal-content--overflow-indicator { + background-image: linear-gradient(to bottom, rgba($layer, 0), $layer); + } + } + } + .#{$prefix}--modal-content:focus ~ .#{$prefix}--modal-content--overflow-indicator { width: calc(100% - 4px);