question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Q-Btn on Safari doesn't display properly when using :to

See original GitHub issue

Describe the bug When using to or :to on a q-btn the style changes when viewing through Safari (iPhone and Desktop Safari) (Firefox works ok), and doesn’t seem to respond to the style requests.

Screenshot 2021-09-10 at 08 36 39

Codepen/jsFiddle/Codesandbox (required) Unfortunately I haven’t been able to reproduce this in Codepen, it displays ok through their built in browser. But dropping the below code in a Quasar dev env and viewing through Safari produces the issue.

To Reproduce Steps to reproduce the behavior:

    <q-btn
      icon="folder_open"
      outline
      dense
      flat
      to="/"
    />
    <q-btn
      icon="folder_open"
      outline
      dense
      flat
    />

Expected behavior Both these buttons should look the same like they do on Firefox (tested with Developer Edition): Screenshot 2021-09-10 at 08 54 59

Platform (please complete the following information): Quasar Version: @quasar/app Version: 2.0.4

Safari: Version 14.1.1 (16611.2.7.1.4)

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Comments:6 (4 by maintainers)

github_iconTop GitHub Comments

1reaction
pdanpdancommented, Sep 25, 2021

It’s a style from tailwind that breaks it. Nothing we can do about it, sorry.

0reactions
rstoenescucommented, Oct 12, 2021

Fix will be available in Quasar v2.1.3

Read more comments on GitHub >

github_iconTop Results From Across the Web

Button text not displaying in safari, displaying in chrome
The text of button is not displaying in Safari,I can return the text using jquery in the console. But it is recognising the...
Read more >
How To Fix Safari Videos Black Screen Bug (iOS 15 & iPadOS ...
Open Safari and load the web page that contains the video that you want to watch. · If the embedded video won't play,...
Read more >
Vue 2 emit not running method, even though setup correctly ...
Coding example for the question Vue 2 emit not running method, even though setup correctly-Vue.js.
Read more >
Quasar v0.15.11 & CLI v0.15.16 are out! | Quasar Framework ...
Should you wish to use QBtn inside of a <form> tag, you should know about the difference between (type=“button”, which is now implicit,...
Read more >
Pdf not showing properly on Safari - Apple Support Communities
If the client computer also doesn't have that font installed, then it is up the to renderer to make the best of it....
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found