diff --git a/src/routes/_components/ShortcutHelpInfo.html b/src/routes/_components/ShortcutHelpInfo.html index 75ced41..f7dd894 100644 --- a/src/routes/_components/ShortcutHelpInfo.html +++ b/src/routes/_components/ShortcutHelpInfo.html @@ -40,6 +40,7 @@ .shortcut-help-info { overflow-y: scroll; scrollbar-width: none; + -ms-overflow-style: none; } .shortcut-help-info::-webkit-scrollbar { display: none; diff --git a/src/routes/_components/dialog/components/MediaDialog.html b/src/routes/_components/dialog/components/MediaDialog.html index 06668a1..2e11c77 100644 --- a/src/routes/_components/dialog/components/MediaDialog.html +++ b/src/routes/_components/dialog/components/MediaDialog.html @@ -95,6 +95,7 @@ width: 100%; flex: 1; scrollbar-width: none; + -ms-overflow-style: none; } .media-scroll::-webkit-scrollbar { @@ -180,7 +181,7 @@ import { oncreate as onCreateDialog } from '../helpers/onCreateDialog' import debounce from 'lodash-es/debounce' import times from 'lodash-es/times' - import { smoothScroll } from '../../../_utils/smoothScroll' + import { smoothScroll, hasNativeSmoothScroll } from '../../../_utils/smoothScroll' import { doubleRAF } from '../../../_utils/doubleRAF' import { store } from '../../../_store/store' import { @@ -277,7 +278,13 @@ let { scrollWidth } = scroller let scrollLeft = Math.floor(scrollWidth * (scrolledItem / length)) if (smooth) { - smoothScroll(scroller, scrollLeft, true) + if (!hasNativeSmoothScroll && 'StyleMedia' in window) { + // Edge has a weird bug where it changes the height if we try to + // smooth scroll, so disable smooth scrolling + scroller.scrollLeft = scrollLeft + } else { + smoothScroll(scroller, scrollLeft, true) + } } else { scroller.scrollLeft = scrollLeft } diff --git a/src/routes/_utils/smoothScroll.js b/src/routes/_utils/smoothScroll.js index d010983..4a520f2 100644 --- a/src/routes/_utils/smoothScroll.js +++ b/src/routes/_utils/smoothScroll.js @@ -59,10 +59,10 @@ function testSupportsSmoothScroll () { return supports } -const smoothScrollSupported = process.browser && testSupportsSmoothScroll() +export const hasNativeSmoothScroll = process.browser && testSupportsSmoothScroll() export function smoothScroll (node, topOrLeft, horizontal) { - if (smoothScrollSupported) { + if (hasNativeSmoothScroll) { return node.scrollTo({ [horizontal ? 'left' : 'top']: topOrLeft, behavior: 'smooth'