diff --git a/src/components/left/main/LeftMain.scss b/src/components/left/main/LeftMain.scss index 7791d66d..c24662df 100644 --- a/src/components/left/main/LeftMain.scss +++ b/src/components/left/main/LeftMain.scss @@ -62,7 +62,7 @@ } } - .chat-list, .RecentContacts, .LeftSearch, .search-content { + .RecentContacts, .LeftSearch, .search-content { height: 100%; overflow-y: auto; } diff --git a/src/components/left/main/LeftMainHeader.scss b/src/components/left/main/LeftMainHeader.scss index b1d628e7..dcc170f6 100644 --- a/src/components/left/main/LeftMainHeader.scss +++ b/src/components/left/main/LeftMainHeader.scss @@ -73,8 +73,9 @@ .Menu .bubble { min-width: 17rem; max-height: calc(100 * var(--vh) - 3.75rem); + overflow-y: auto; - overflow-y: overlay; + @include overflow-y-overlay(); } // @optimization diff --git a/src/components/left/settings/Settings.scss b/src/components/left/settings/Settings.scss index 1433c7c7..e00f2fc7 100644 --- a/src/components/left/settings/Settings.scss +++ b/src/components/left/settings/Settings.scss @@ -1,3 +1,5 @@ +@import '../../../styles/mixins'; + #Settings { height: 100%; @@ -33,8 +35,9 @@ .settings-content { background: var(--color-background); height: calc(100% - var(--header-height)); + overflow-y: auto; - overflow-y: overlay; + @include overflow-y-overlay(); &.infinite-scroll { display: flex; diff --git a/src/components/middle/MessageList.scss b/src/components/middle/MessageList.scss index b38bd3c4..4359801c 100644 --- a/src/components/middle/MessageList.scss +++ b/src/components/middle/MessageList.scss @@ -1,11 +1,15 @@ +@import '../../styles/mixins'; + .MessageList { flex: 1; width: 100%; + margin-bottom: .5rem; + overflow-anchor: none; overflow: scroll; overflow-x: hidden; - overflow-y: overlay; - margin-bottom: .5rem; + overflow-y: auto; + @include overflow-y-overlay(); .mask-image-enabled & { mask-image: linear-gradient(to top, transparent 0, #000 0.5rem); diff --git a/src/components/middle/composer/Composer.scss b/src/components/middle/composer/Composer.scss index 98f30ea1..4309f519 100644 --- a/src/components/middle/composer/Composer.scss +++ b/src/components/middle/composer/Composer.scss @@ -1,3 +1,5 @@ +@import '../../../styles/mixins'; + .Composer { align-items: flex-end; @@ -442,9 +444,10 @@ border-radius: var(--border-radius-messages); padding: 0.5rem 0; max-height: 15rem; + overflow-x: hidden; overflow-y: auto; - overflow-y: overlay; + @include overflow-y-overlay(); box-shadow: 0 1px 2px var(--color-default-shadow); diff --git a/src/components/middle/composer/EmojiTooltip.scss b/src/components/middle/composer/EmojiTooltip.scss index 817f5e81..94303710 100644 --- a/src/components/middle/composer/EmojiTooltip.scss +++ b/src/components/middle/composer/EmojiTooltip.scss @@ -1,8 +1,11 @@ .EmojiTooltip { display: flex; padding-left: .25rem; + overflow-x: auto; - overflow-x: overlay; + @supports (overflow-x: overlay) { + overflow-x: overlay; + } overflow-y: hidden; .EmojiButton { diff --git a/src/components/right/Profile.scss b/src/components/right/Profile.scss index c3cbf4d5..b4255d2b 100644 --- a/src/components/right/Profile.scss +++ b/src/components/right/Profile.scss @@ -1,9 +1,13 @@ +@import '../../styles/mixins'; + .Profile { height: 100%; display: flex; flex-direction: column; - overflow-y: scroll; + overflow-x: hidden; + overflow-y: scroll; + @include overflow-y-overlay(); > .profile-info > .ChatInfo { grid-area: chat_info; diff --git a/src/components/ui/ListItem.scss b/src/components/ui/ListItem.scss index f8a4bba4..e51de1ac 100644 --- a/src/components/ui/ListItem.scss +++ b/src/components/ui/ListItem.scss @@ -21,6 +21,12 @@ } } + body.is-ios &, body.is-android & { + &:not(:last-of-type)::after { + transform: scaleY(0.5); + } + } + .ListItem-button { width: 100%; background-color: var(--background-color); diff --git a/src/styles/_common.scss b/src/styles/_common.scss index 659da08f..d64f6fa8 100644 --- a/src/styles/_common.scss +++ b/src/styles/_common.scss @@ -1,3 +1,5 @@ +@import './mixins'; + // Common styles for all media-type components across the app. .media-inner { position: relative; @@ -67,9 +69,11 @@ .chat-list { background: var(--color-background); height: 100%; - overflow-y: auto; padding: .5rem .125rem .5rem .4375rem; + overflow-y: auto; + @include overflow-y-overlay(); + .scroll-container { position: relative; } diff --git a/src/styles/_mixins.scss b/src/styles/_mixins.scss index e7df068f..0f1b0370 100644 --- a/src/styles/_mixins.scss +++ b/src/styles/_mixins.scss @@ -4,3 +4,14 @@ @content; } } + +@mixin overflow-y-overlay() { + @supports (overflow-y: overlay) { + body.is-android & { + overflow-y: overlay; + + //Workaround for Android <= 9 + overflow-x: hidden; + } + } +} diff --git a/src/util/captureEvents.ts b/src/util/captureEvents.ts index 3f27a406..277f9241 100644 --- a/src/util/captureEvents.ts +++ b/src/util/captureEvents.ts @@ -1,4 +1,4 @@ -import { IS_IOS, IS_TOUCH_ENV } from './environment'; +import { IS_IOS } from './environment'; export enum SwipeDirection { Up, @@ -104,7 +104,7 @@ export function captureEvents(element: HTMLElement, options: CaptureOptions) { captureEvent = undefined; - if (options.selectorToPreventScroll) { + if (IS_IOS && options.selectorToPreventScroll) { Array.from(document.querySelectorAll(options.selectorToPreventScroll)).forEach((scrollable) => { scrollable.style.overflow = ''; }); @@ -155,12 +155,10 @@ export function captureEvents(element: HTMLElement, options: CaptureOptions) { shouldPreventScroll = hasSwiped; } - if (IS_TOUCH_ENV && shouldPreventScroll && options.selectorToPreventScroll) { - if (options.selectorToPreventScroll) { - Array.from(document.querySelectorAll(options.selectorToPreventScroll)).forEach((scrollable) => { - scrollable.style.overflow = 'hidden'; - }); - } + if (IS_IOS && shouldPreventScroll && options.selectorToPreventScroll) { + Array.from(document.querySelectorAll(options.selectorToPreventScroll)).forEach((scrollable) => { + scrollable.style.overflow = 'hidden'; + }); } } }