Вопрос в каких случаях использовать тоже не очень состоятельный по причине бесконечности вариантов ответа.
Приставка inline- означает, что вы хотите сделать элемент строчным, но с функционалом других типов отображения. Так есть inline-block, inline-flex, inline-grid.
Transform создает новый контекст с новой системой координат, поэтому наследники не принимают координаты от viewport. Нормального решения или обхода данной особенности на CSS нет.
Можете только костылём «эмулировать» координаты viewport с помощью установки размеров родителя по высоте и ширине viewport. Вот так: https://codesandbox.io/s/dank-sound-b7rbv
Вот только фиксированность элемента это всё равно не восстановит.
Но не до конца. Иногда фокус прокрутки все равно смещается на body, но, спасибо этому методу, сам контент body не прокручивается.
У них эта проблема есть даже в стандартном приложении настроек. Когда приходит обновление, то вы можете наблюдать её внутри окошка с текстом внутри общего экрана.
Популярный viewport у Android — 360px (чуть ли не у всех такой).
Типичный viewport iPhone — 375px (iPhone 6, 6S, 7, 8, X, XS, 11).
Минимальный viewport вообще — 320px.
Это всё, что вам нужно знать, чтобы успешно верстать.
https://github.com/iamcal/js-emoji