quasar: Dialog: background doesn't fit 100vh when safari's address bar is minimized on iOS 15.x

What happened?

The address bar of safari on iOS 15.2.1 can be in a minimized state which affect the display of the shadow background when a Dialog is opened: the background doesn’t take all the height of the viewport:

ios-15-minimized

As we can see, the background doesn’t take 100vh, but instead let a space of the height of the adresse bar maximized:

What did you expect to happen?

The background must fit to take all the height of the viewport.

Reproduction URL

https://quasar.dev/quasar-plugins/dialog#example--basic

How to reproduce?

On a mobile device with Safari and iOS > 15, go to the Dialog component documentation
Scroll the page to have the adresse bar minimized, and open a basic dialog from the examples.
The background should not fit the height of the viewport

Flavour

Quasar CLI (@quasar/cli | @quasar/app)

Areas

Components (quasar)

Platforms/Browsers

Safari, iOS

Quasar info output

Operating System - Linux(5.13.0-27-generic) - linux/x64
NodeJs - 16.3.0

Global packages
  NPM - 7.15.1
  yarn - 1.22.17
  @quasar/cli - 1.2.2
  @quasar/icongenie - Not installed
  cordova - Not installed

Important local packages
  quasar - 2.4.11 -- Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time
  @quasar/app - 3.2.9 -- Quasar Framework local CLI
  @quasar/extras - 1.12.4 -- Quasar Framework fonts, icons and animations
  eslint-plugin-quasar - Not installed
  vue - 3.2.27 -- The progressive JavaScript framework for building modern web UI.
  vue-router - 4.0.12
  vuex - 4.0.2 -- state management for Vue.js
  electron - Not installed
  electron-packager - Not installed
  electron-builder - Not installed
  @babel/core - 7.15.5 -- Babel compiler core.
  webpack - 5.62.1 -- Packs CommonJs/AMD modules for the browser. Allows to split your codebase into multiple bundles, which can be loaded on demand. Support loaders to preprocess files, i.e. json, jsx, es7, css, less, ... and your custom stuff.
  webpack-dev-server - 4.7.3 -- Serves a webpack app. Updates the browser on changes.
  workbox-webpack-plugin - Not installed
  register-service-worker - 1.7.2 -- Script for registering service worker, with hooks
  typescript - 4.5.4 -- TypeScript is a language for application scale JavaScript development
  @capacitor/core - Not installed
  @capacitor/cli - Not installed
  @capacitor/android - Not installed
  @capacitor/ios - Not installed

Quasar App Extensions
  *None installed*

Relevant log output

No response

Additional context

No response

About this issue

Original URL
State: open
Created 2 years ago
Reactions: 3
Comments: 16 (6 by maintainers)

Most upvoted comments

We have a chat with Quasar Layout and <q-footer> with message composer “working” in Safari and WKWebView.

It can never be perfect until they fix Safari, but this may (or may not) help:

diff --git a/node_modules/quasar/src/plugins/Screen.js b/node_modules/quasar/src/plugins/Screen.js
index 3eef4ea..3dbbcfb 100644
--- a/node_modules/quasar/src/plugins/Screen.js
+++ b/node_modules/quasar/src/plugins/Screen.js
@@ -62,8 +62,8 @@ export default defineReactivePlugin({
 
     this.__update = force => {
       const
-        w = window.innerWidth,
-        h = window.innerHeight
+        w = window.visualViewport !== void 0 ? window.visualViewport.width : window.innerWidth,
+        h = window.visualViewport !== void 0 ? window.visualViewport.height : window.innerHeight
 
       if (h !== this.height) {
         this.height = h

This was not the only change I’ve made, but without this, anything else I did had no effect.

thexeos on Jan 27, 2022