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

[maggie44]

Platform:
Quasar Version:
@quasar/app Version: 2.0.4

What version of Tailwind CSS are you using?

"tailwindcss": "^2.2.15"

What version of Node.js are you using?

v14.17.2

What browser are you using?

Safari (Desktop and Mobile)
Safari: Version 14.1.1 (16611.2.7.1.4)

What operating system are you using?

macOS

Reproduction URL

I have tried to replicate this in JSFiddle but as it is Safari browser specific I haven't been able to. Instead, I have attached a demo project. (yarn install and quasar dev to start)

safari-issue 2.zip

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

I raise this with the Quasar team and they suggested it is an issue with the Tailwinds styling being applied: quasarframework/quasar#10636

To Reproduce
Steps to reproduce the behavior:

It is a Quasar project created using the Quasar CLI + a tailwinds setup as described here (https://dev.to/eltoritoelvis/add-tailwind-css-to-your-quasar-project-in-5-minutes-or-less-3n4o). Then try the below two examples:

    <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):

[adamwathan]

Hey! This looks like a Quasar issue — they are generating invalid HTML when you add the to attribute:

Notice the type="button" on the a tag, anchor tags do not support that attribute. Tailwind sets anything with type="button" to be styled with a-webkit-appearance: button by default. Quasar should not be including that attribute on links, only on buttons.

One workaround for your project is to add this CSS rule to your base layer:

@layer base {
  [type="button"] {
    -webkit-appearance: unset;
  }
}

...but this may have unintended consequences for real buttons.

Another is to add appearance: none to anything with the q-btn class:

.q-btn {
  appearance: none;
}

Ultimately though the best long term fix is to get Quasar to patch the issue where they are adding the type attribute incorrectly to <a> tags 👍🏻

[pdanpdan]

Found the problem, thank you.

[maggie44]

Thanks for investigating.

Adding here again the link to the tracking issue over on the Quasar repo for others to find: quasarframework/quasar#10636