Как перейти в minimal view при пролистывании страницы в iOS Safari/Android Chrome (portrait)?

Question

Dr-Gonzo @Dr-Gonzo

Web dev newbie

Как перейти в minimal view при пролистывании страницы в iOS Safari/Android Chrome (portrait)?

Всем привет!

Такой вопрос: от чего зависит переход в minimal view при пролистывании страницы в iOS Safari/Android Chrome?(portrait orientation)

Проблема: при скроллинге приложение не переходит в minimal view ни в iOS Safari/ни в Android Chrome в portrait orientation. В Safari переходит, если адресную строку сдвинуть вверх, как бы листая.

Stack: Laravel 8/Vue js 2.6.12/TailwindCss,Bootstrap 5

Решение искал. Наиболее близкая тема: https://stackoverflow.com/questions/24889100/ios-8.... Где сказано, что требуется поместить страницу в обертку с overfow:auto/hidden, но это не работает, цитата:

A common approach to the problem is to have a wrapper div that fills the browser viewport, set overflow to hidden or auto, then scroll horizontally and/or vertically inside it.

Чтобы яснее была суть вопроса, вот картинка, как должно работать: https://i.stack.imgur.com/5in6O.gif

Ниже фрагменты кода.

Master blade:

<!-- resources/views/basic.blade.php -->
<html lang="{{ app()->getLocale() }}">

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <title>Vue JS: Steilgut demo | @yield('title', 'Vue JS: Steilgut demo 2')</title>
    <meta name="description" content="Vue JS: Steilgut demo 2" />
    <meta name="keywords" content="Vue JS: Steilgut demo 2" />
    <!-- CSRF Token -->
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <!--[if lt IE 9]>
    <script src="js/html5shiv.js"></script>
    <![endif]-->
    {{-- <script type="text/javascript" src="./js/vue.js"></script> --}}
    {{-- <script type="text/javascript" src="./js/vue-router.js"></script> --}}
    <!-- <link rel="stylesheet" href="css/reset.css"/> -->
    <meta name="HandheldFriendly" content="True" />
    <meta name="MobileOptimized" content="320" />
    <meta name=apple-mobile-web-app-capable content=yes>
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
    {{-- <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" /> --}}
    @yield('exp_head')
</head>

<body class="fp">
    @yield('content')
</body>

</html>

App blade:

@extends('layouts.master')

@section('exp_head')
    <link href="{{ asset('css/app.css') }}" rel="stylesheet" />
    <link href="{{ asset('css/normalize.css') }}" rel="stylesheet" />
    {{-- <link href="{{ asset('css/fonts.css') }}" rel="stylesheet"> --}}
    {{-- <script src="https://use.fontawesome.com/2ba7753f9f.js"></script> --}}
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css"
        
    <script src="/js/events.js"></script>
    <script src="{{ asset('js/app.js') }}" async></script>
@endsection
@section('content')
    <div id="app" class="fp" v-cloak>
        <router-view></router-view>
    </div>
@endsection

Чтобы попасть на главную страницу пользователь подтверждает соглашение и его перенаправляет на MastheadComp, который является основным и из-под которого уже осуществляется перенаправление на контентные страницы:

<template>
    <div
        id="masthead"
        class="steilgut-masthead ar-balanced-page"
        :style="getStyleClassList"
    >
 <div class=”masthead-content”>
    <header>...</header>

    <transition name="routes-fade">
       <router-view />
    </transition>

    <footer></footer>
 </div>
  </div>
</template>

SCSS для html, body, #app, .steilgut-masthead .

html, body =>
...
html {
  width: 100%;

  height: 100%;
  height: 100vh;
  height: -webkit-fill-available;
  height: -moz-available;
}

body {
  height: 100%;
  min-height: 0; // flex box stops to stretch to content size so we can scroll

  width: 100%;
  width: 100vw;
  width: -moz-available;
  width: -webkit-fill-available;

  min-width: 100%;
  min-width: 100%;
  min-width: 100vw;
  min-width: -moz-available;
  min-width: -webkit-fill-available;

  margin: 0;
  padding: 0;
  overflow: hidden;
}
...

app.scss =>
...
  #app {
    display: flex;
    flex: 1 0 100%;
    flex-direction: column;

    width: 100%;
    height: 100%;
    min-height: 100%;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}
..
    
.steilgut-masthead,
.masthead-content {
    display: flex;
    flex: 1 0 100%;
    flex-direction: column;
    width: 100%;
    min-width: 100%;
    height: 100%;
    align-items: stretch;
    /* border: 2px solid #ebcb9a; */
}

.steilgut-masthead {
    position: relative;
    z-index: 5;

    overflow: auto;
    max-width: 100%;
}

Буду благодарен за любой дельный совет. Очень нужна помощь в понимании причин ошибки.