Hello quasar people!
I bring you a bug that I found in q-img.

If I write this code with a jpg, everything is correct:

<q-img src=“statics/images/1.jpg” class=“max-width:800px”></q-img>

Now, if I use a svg, the error occurs:

<q-img src=“statics/images/1.svg” class=“max-width:800px”></q-img>

As you can see in this example, q-img does not resize svg well if max-width is less than 800px.
I discard that it is an error in the svg, since it works perfectly in the other browsers (even in internet explorer 11!)
It only happens on desktop with windows and edge (which is not a little, since they know it is the default browser in windows 10).

If I use:
<img src=“statics/images/1.svg” class=“max-width:800px”><img>
everything works perfectly

I always try quasar on all mobile devices (apple, android), on linux and windows, and with practically all browsers. This error was not presented in any except in Edge for Windows 10.
I hope you can solve it.
Thank you and keep up this excellent framework.

Thanks to everyone for your replies.
Dear patryckx: that is just the problem, since they behave different chrome and samsung internet when it comes to show the add to home screen, I need to differentiate them.
With Edge it happens the same, it is disguised as chrome in android version.
I will continue looking for solutions and I will publish them here.
Thank you!

Hello suess. Changing the default quasar font with one from google fonts is easy. I explain step by step:

1. Go to quasar config and delete or comment
   extras: [// ‘roboto-font’,],

This will automatically quasar not add a robot in the build.

2. Go to google fonts, and choose a font (let’s see the example of Open Sans)

3. Now go to customize and choose the weights.

4. Go back to embed and copy the following from “standard”:

<link href = “https://fonts.googleapis.com/css?family=Open+Sans&display=swap” rel = “stylesheet”>

5. In Quasar, go to index.template.html and paste the above in the “head” (where the other “links” are located)

6. Finally, go to your main “Layout” and paste the content of “Specify in CSS” in body class (Google Fonts):

font-family: ‘Open Sans’, sans-serif;

In my case, that I use SASS, it would look like this:

<style lang = “sass”>
body
font-family: ‘Open Sans’, sans-serif
</style>

Ready! It will replace all your Roboto fonts with Open Sans without having to change anything.
(Remember to add the weights of the new font if you used codes like ‘text-weight-light’.

Sorry for my english.

Hello quasar people!
I bring you a bug that I found in q-img.

If I write this code with a jpg, everything is correct:

<q-img src=“statics/images/1.jpg” class=“max-width:800px”></q-img>

Now, if I use a svg, the error occurs:

<q-img src=“statics/images/1.svg” class=“max-width:800px”></q-img>

As you can see in this example, q-img does not resize svg well if max-width is less than 800px.
I discard that it is an error in the svg, since it works perfectly in the other browsers (even in internet explorer 11!)
It only happens on desktop with windows and edge (which is not a little, since they know it is the default browser in windows 10).

If I use:
<img src=“statics/images/1.svg” class=“max-width:800px”><img>
everything works perfectly

I always try quasar on all mobile devices (apple, android), on linux and windows, and with practically all browsers. This error was not presented in any except in Edge for Windows 10.
I hope you can solve it.
Thank you and keep up this excellent framework.

Hello!
In chrome for Windows and Android, q-input in autocomplete mode works fine, but in Safari the famous yellow background is not removed.
Any ideas?

Hello! first I want to thank lucasfernog for bothering to solve this problem. Your solution to incorporate userAgent was great.
I allow myself to give some details for those who need it:

I guess we all want our PWA installed on users’ smartphones, and we know that 90% of the market is covered by Safari (ios) and Chrome (Android).
With “beforeinstallprompt” we solve the banners of “Add to the home screen” (Android) and for safari with “Platform.is.safari”.
The wonderful quasar also covers virtually all major browsers. But, in my opinion, there were two that were disguised as chrome, but they did not behave like this when it came to installing our PWA.

One was Edge that, although it is not my preference, has more than 10,000,000 downloads only on Android.
The other one is “Samsung Internet”, which has the same problem as Edge: It is detected as chrome, but it does not behave the same, so it is necessary to detect it and display a banner with the installation instructions.

“Samsung Internet” is the default browser on “samsung galaxy” phones (which are not few) and now they have released this browser for all phones, which translates into more than 1,000,000,000 downloads in playstore. A more than important number.
The solution of lucasfernog when using “userAgent” also solved the detection of “Samsung Internet” and, consequently, of many other browsers.
Thanks again Lucas, and this is a giant step for the PWAs made with Quasar.

Regards!

Dear Admin, as you well say, Edge is detected perfectly in windows, but in android, the detection points out:

name: ‘Chrome’,
platform: ‘Android’

Regards!

Thanks to everyone for your replies.
Dear patryckx: that is just the problem, since they behave different chrome and samsung internet when it comes to show the add to home screen, I need to differentiate them.
With Edge it happens the same, it is disguised as chrome in android version.
I will continue looking for solutions and I will publish them here.
Thank you!

I can not detect samsung internet browser either. jaja.
I think it’s important to be able to warn users if the PWA is not working well, right?

Hi everyone, i have a problem.
i try to build a pwa in quasar, work fine, but in MS edge for android i have a problem width audio tag (play once). I try to detect this browser, but not work with q-platform detection. ¿any ideas?
(Sorry for my english)
Thanks