Повсеместное использование `--safe-area-inset-top` by inomdzhon · Pull Request #2414 · VKCOM/VKUI

inomdzhon · 2022-04-19T09:03:33Z

В частности поправил, что на Android игнорировалось использование --safe-area-inset-top в следующих компонентах:

Проверил на эмуляторе

О значении по умолчанию для iOS

Для iOS в --safe-area-inset-top в :root выставлялось значение по умолчанию в 20px (прикрепляю код ниже)

Lines 34 to 35 in ca0a2da

    
           /* iOS insets */ 
        
           --safe-area-inset-top: 20px;

Из-за этого для других платформ приходилось обнулять это значение точечно (прикрепляю пример ниже)

VKUI/src/components/PanelHeader/PanelHeader.css

Lines 155 to 160 in ca0a2da

    
           @supports not (padding-top: env(safe-area-inset-top)) { 
        
             .PanelHeader--android, 
        
             .PanelHeader--vkcom { 
        
               --safe-area-inset-top: 0px; 
        
             } 
        
           }

Чтобы избежать этого, сделал так, что значение по умолчанию выставлялось только для iOS (ссылка на коммит)

DevTools Safari

DevTools Android

fix [Bug] ModalPage на Android игнорирует верхний инсет #2183

UPD
В рамках этого PR, также поправил следующие issues:

codesandbox-ci · 2022-04-19T09:05:19Z

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 0628334:

Sandbox	Source
VKUI - default example	Configuration

github-actions · 2022-04-19T09:06:59Z

size-limit report 📦

Path	Size
JS	75.64 KB (0%)
JS, unstable	25.81 KB (0%)
CSS	42.43 KB (-0.09% 🔽)
CSS, unstable	1015 B (0%)

github-actions · 2022-04-19T09:09:46Z

👀 Styleguide deployed

See the styleguide for this PR at https://vkcom.github.io/VKUI/pull/2414/

github-actions · 2022-04-19T09:12:27Z

Code coverage

lines	3669 / 4692	78.19%
statements	3738 / 4782	78.16%
functions	823 / 1028	80.05%
branches	3045 / 4344	70.09%
branchesTrue	0 / 0	100.00%

Generated by 🚫 dangerJS against 0628334

stoope · 2022-04-19T14:13:47Z

При landscape ориентации не сломается?)

stoope · 2022-04-19T14:16:21Z

src/styles/constants.css

+ */
+@supports (-webkit-touch-callout: none) {
+  :root {
+    --safe-area-inset-top: 20px;


А зачем мы ставим 20 на iOS? Есть какие то кейсы где в safe-area-inset-top не проставляется высота? А если iphone без челки?)

Вот на айфонах без чёлки как раз 20. Ещё на айфонах без чёлки может быть старая iOS, где будут отсутствовать нужные нам переменные окружения.

Мне не понятно почему для IOS выставляется 20 а для остальных платформ перебивается в 0. Это какой то баг был или особенность мини аппок?

Тут #2414 (comment) я глянул, что с 20px напрямую в Safari выглядит так себе

Если фикс для мини-апп, то можно же через VKWebAppUpdateConfig сетить эти 20px, не?

@stoope Игорь рассказал мне в оффлайне, что значение по умолчанию в 20px было необходимо для версий iOS без поддержки CSS Custom Properties. Это позволяло полифилить --safe-area-inset-top

:root { --safe-area-inset-top: 20px } .ComponentA { top: 20px top: var(--safe-area-inset-top); }

Пришли к тому, что можно удалить это значение, т.к. прошло достаточно много времени, чтобы считать, что iOS с такой версий уже почти нет.

Запушил коммит.

PS: 20px это высота статус бара в iOS без челки

inomdzhon · 2022-04-19T15:14:22Z

При landscape ориентации не сломается?)

Воу, однако...

Но гляжу, что отключена ротация в приле))

inomdzhon · 2022-04-20T10:24:10Z

На iOS тоже отключена ротация приложения.

Глянул в браузере, там, где поддерживается safe-area-inset-top, он 0px.

Ещё интересная особенность, что система сама переключает значения в зависимости от portrait и landscape (прикрепил демо ниже)

Рис. 1. 0px на portrait

Рис. 2. 47px landscape

Нюанс про `20px` по умолчанию

Но если не будет поддерживаться, то эти 20px смещают контент, что в portrait, что в landscape. @fedorov-xyz правильно понимаю, что выставили 20px в контексте бага в Мини Апп?

inomdzhon · 2022-04-20T11:02:34Z

Ещё обнаружил небольшой баг #2422 – как раз связано с тем, о чём выше писал. А именно, что на landscape константы safe-area-inset-left и safe-area-inset-right больше 0px.

Мог бы поправить сразу в этой ветке) @stoope что думаешь?

stoope · 2022-04-21T16:55:32Z

Ещё обнаружил небольшой баг #2422 – как раз связано с тем, о чём выше писал. А именно, что на landscape константы safe-area-inset-left и safe-area-inset-right больше 0px.

Мог бы поправить сразу в этой ветке) @stoope что думаешь?

Ага, давай починим. А что если использовать position: sticky у PanelHeader?

eolme · 2022-04-21T19:57:43Z

Со sticky не все так просто, легко получить дополнительные проблемы, когда его что-то может перекрыть, либо он перестанет адекватно позиционироваться из-за особенностей его работы

inomdzhon · 2022-04-22T05:32:35Z

А что если использовать position: sticky у PanelHeader? @stoope

Со sticky не все так просто, легко получить дополнительные проблемы, когда его что-то может перекрыть, либо он перестанет адекватно позиционироваться из-за особенностей его работы @eolme

Это да, sticky по щелчку не влепить
В рамках другой задачи можно будет поизучать

inomdzhon requested a review from a team as a code owner April 19, 2022 09:03

stoope reviewed Apr 19, 2022

View reviewed changes

inomdzhon mentioned this pull request Apr 20, 2022

[Bug][FixedLayout] Сломана центровка внутри View > Panel на устройствах с бровкой в landscape режиме #2422

Closed

inomdzhon added 4 commits April 22, 2022 08:25

fix(iOS): set default --safe-area-inset-top only for iOS

dec482b

feat(ModalRoot): use --safe-area-inset-top for android

ed4507a

feat(SplitLayout): use --safe-area-inset-top for android/vkcom

8feba16

fix(FixedLayout): fix positioning

230b4dc

inomdzhon force-pushed the 2183-fix-ModalPage-safe-area-inset-in-android branch from bafedbb to 230b4dc Compare April 22, 2022 05:25

feat(iOS): remove default value for --safe-area-inset-top in old iOS

0628334

stoope approved these changes Apr 22, 2022

View reviewed changes

inomdzhon merged commit 4eb437a into master Apr 25, 2022

inomdzhon deleted the 2183-fix-ModalPage-safe-area-inset-in-android branch April 25, 2022 06:19

inomdzhon mentioned this pull request May 11, 2022

fix(FixedLayout): revert to 1364 PR number #2472

Merged

mendrew mentioned this pull request Feb 20, 2024

fix(PanelHeader): Replace FixedLayout with sticky position #6609

Closed

	@supports not (padding-top: env(safe-area-inset-top)) {
	.PanelHeader--android,
	.PanelHeader--vkcom {
	--safe-area-inset-top: 0px;
	}
	}

Conversation

inomdzhon commented Apr 19, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

О значении по умолчанию для iOS

Uh oh!

codesandbox-ci bot commented Apr 19, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions bot commented Apr 19, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

size-limit report 📦

Uh oh!

github-actions bot commented Apr 19, 2022

👀 Styleguide deployed

Uh oh!

github-actions bot commented Apr 19, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Code coverage

Uh oh!

stoope commented Apr 19, 2022

Uh oh!

stoope Apr 19, 2022

Choose a reason for hiding this comment

Uh oh!

fedorov-xyz Apr 19, 2022

Choose a reason for hiding this comment

Uh oh!

stoope Apr 21, 2022

Choose a reason for hiding this comment

Uh oh!

inomdzhon Apr 21, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

inomdzhon Apr 22, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

inomdzhon commented Apr 19, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

inomdzhon commented Apr 20, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Нюанс про 20px по умолчанию

Uh oh!

inomdzhon commented Apr 20, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

stoope commented Apr 21, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

eolme commented Apr 21, 2022

Uh oh!

inomdzhon commented Apr 22, 2022

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

inomdzhon commented Apr 19, 2022 •

edited

Loading

codesandbox-ci bot commented Apr 19, 2022 •

edited

Loading

github-actions bot commented Apr 19, 2022 •

edited

Loading

github-actions bot commented Apr 19, 2022 •

edited

Loading

inomdzhon Apr 21, 2022 •

edited

Loading

inomdzhon Apr 22, 2022 •

edited

Loading

inomdzhon commented Apr 19, 2022 •

edited

Loading

inomdzhon commented Apr 20, 2022 •

edited

Loading

Нюанс про `20px` по умолчанию

inomdzhon commented Apr 20, 2022 •

edited

Loading

stoope commented Apr 21, 2022 •

edited

Loading