Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Initial SVG font size rendering incorrect inside QDialog on Chrome Mobile #17446

Open
lepokle opened this issue Aug 19, 2024 · 0 comments
Open

Comments

@lepokle
Copy link

lepokle commented Aug 19, 2024

What happened?

I embedd a svg with text inside a QDialog component. When opening the dialog the font is rendered bigger than specified. After clicking on screen, font-size is corrected.
This happens at least in Chrome Mobile (directly or inside a capacitor app). I could not reproduce it on Firefox (Desktop/Mobile) or Chrome Desktop.

Using the final html of the QDialog component instead of the component itself does not raise the issue.

What did you expect to happen?

SVG text size should be correct on first rendering.

Reproduction URL

https://codepen.io/lepokle/pen/eYwVeNm

How to reproduce?

  1. Open Chrome on a mobile device
  2. Open the reproduction link
  3. Tap on "Open" button
  4. Text "Hello World" is too big
  5. Tap anywhere on screen
    => Font is rerendered in correct size

Flavour

Quasar CLI with Vite (@quasar/cli | @quasar/app-vite)

Areas

Components (quasar), SPA Mode, Capacitor Mode

Platforms/Browsers

Chrome, Android

Quasar info output

Operating System - Linux(6.9.10-arch1-1) - linux/x64
NodeJs - 18.20.4

Global packages
  NPM - 10.8.2
  yarn - 1.22.22
  pnpm - Not installed
  bun - Not installed
  @quasar/cli - undefined
  @quasar/icongenie - 4.0.0
  cordova - 12.0.0 (cordova-lib@12.0.1)

Important local packages
  quasar - 2.16.4 -- Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time
  @quasar/app-vite - 2.0.0-beta.14 -- Quasar Framework App CLI with Vite
  @quasar/extras - 1.16.11 -- Quasar Framework fonts, icons and animations
  eslint-plugin-quasar - Not installed
  vue - 3.4.29 -- The progressive JavaScript framework for building modern web UI.
  vue-router - 4.3.3
  pinia - 2.1.7 -- Intuitive, type safe and flexible Store for Vue
  vuex - Not installed
  vite - 5.2.12 -- Native-ESM powered web dev build tool
  vite-plugin-checker - Not installed
  eslint - 8.57.0 -- An AST-based pattern checker for JavaScript.
  esbuild - 0.20.2 -- An extremely fast JavaScript and CSS bundler and minifier.
  typescript - 5.3.3 -- TypeScript is a language for application scale JavaScript development
  workbox-build - Not installed
  register-service-worker - Not installed
  electron - Not installed
  electron-packager - Not installed
  @electron/packager - Not installed
  electron-builder - Not installed
  @capacitor/core - 6.1.0 -- Capacitor: Cross-platform apps with JavaScript and the web
  @capacitor/cli - 6.1.0 -- Capacitor: Cross-platform apps with JavaScript and the web
  @capacitor/android - 6.1.0 -- Capacitor: Cross-platform apps with JavaScript and the web
  @capacitor/ios - 6.1.2 -- Capacitor: Cross-platform apps with JavaScript and the web

Quasar App Extensions
  @quasar/quasar-app-extension-testing-unit-vitest - 1.0.0 -- A Quasar App Extension for running tests with Vitest

Relevant log output

No response

Additional context

No response

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

1 participant