ztr/TelegramPWA
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix story ghost animation for PWA on IOS (#3951)

Browse Source
This commit is contained in:
Alexander Zinchuk 2023-11-06 01:43:09 +04:00
parent 94b5c31103
commit 0b92eb5852
3 changed files with 14 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/story/StoryViewer.module.scss
View File

@ -11,10 +11,6 @@
z-index: var(--z-story-viewer); z-index: var(--z-story-viewer);
transform-origin: 50% 50%; transform-origin: 50% 50%;
@media (max-width: 600px) {
background: rgba(0, 0, 0, 1);
}
// Potential perf improvement // Potential perf improvement
&:not(:global(.shown)) { &:not(:global(.shown)) {
display: block !important; display: block !important;
@ -51,6 +47,10 @@
.backdrop { .backdrop {
background-color: rgba(0, 0, 0, 0.9); background-color: rgba(0, 0, 0, 0.9);
z-index: 0; z-index: 0;
@media (max-width: 600px) {
background: rgba(0, 0, 0, 1);
}
} }
.backdropNonInteractive { .backdropNonInteractive {

5
src/components/story/helpers/ghostAnimation.ts
View File

@ -38,6 +38,11 @@ export function animateOpening(
if (isMobile) { if (isMobile) {
toWidth = windowWidth - 2 * MOBILE_OFFSET; toWidth = windowWidth - 2 * MOBILE_OFFSET;
toHeight = windowHeight - OFFSET_BOTTOM - 2 * MOBILE_OFFSET; toHeight = windowHeight - OFFSET_BOTTOM - 2 * MOBILE_OFFSET;
const safeAreaBottom = getComputedStyle(document.documentElement).getPropertyValue('--safe-area-bottom');
if (safeAreaBottom) {
toHeight -= parseFloat(safeAreaBottom);
}
} }
const toLeft = isMobile ? MOBILE_OFFSET : (windowWidth - toWidth) / 2; const toLeft = isMobile ? MOBILE_OFFSET : (windowWidth - toWidth) / 2;

5
src/styles/_variables.scss
View File

@ -298,6 +298,11 @@ $color-message-story-mention-to: #74bcff;
--slide-transition: 300ms cubic-bezier(0.25, 1, 0.5, 1); --slide-transition: 300ms cubic-bezier(0.25, 1, 0.5, 1);
--select-transition: 200ms ease-out; --select-transition: 200ms ease-out;
--safe-area-top: env(safe-area-inset-top);
--safe-area-right: env(safe-area-inset-right);
--safe-area-bottom: env(safe-area-inset-bottom);
--safe-area-left: env(safe-area-inset-left);
body.is-ios { body.is-ios {
--layer-transition: 650ms cubic-bezier(0.22, 1, 0.36, 1); --layer-transition: 650ms cubic-bezier(0.22, 1, 0.36, 1);
--layer-transition-behind: 650ms cubic-bezier(0.33, 1, 0.68, 1); --layer-transition-behind: 650ms cubic-bezier(0.33, 1, 0.68, 1);