How to switch to minimal view when swiping a page in iOS Safari/Android Chrome (portrait)?

D

Dr-Gonzo2021-08-05 03:49:58

css

Dr-Gonzo, 2021-08-05 03:49:58

Hello!

Such a question : what determines the transition to minimal view when scrolling the page in iOS Safari / Android Chrome? (portrait orientation)
Problem : when scrolling, the application does not go to minimal view neither in iOS Safari / nor in Android Chrome in portrait orientation. In Safari, it goes if the address bar is moved up, as if scrolling.
Stack : Laravel 8/Vue js 2.6.12/TailwindCss,Bootstrap 5 I was

looking for a solution. Closest topic: https://stackoverflow.com/questions/24889100/ios-8 ... . Where it says to wrap the page with overfow:auto/hidden, but that doesn't work, quote:

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.

To clarify the essence of the issue, here is a picture of how it should work: https://i.stack.imgur.com/5in6O.gif

Below are code snippets.

Masterblade :

<!-- 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>

Appblade :

@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

To get to the main page, the user confirms the agreement and is redirected to MastheadComp, which is the main one and from under which the redirect to content pages is already carried out:

<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 for 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%;
}

I would be grateful for any good advice. I really need help understanding the cause of the error.