Layouts are braking in different browser or OS

enter image description here

I am using quasar frame work for making my site responsive and everything is working fine. I have tested in mobile responsive it is working fine And I have also tested in different browser it is working fine but coming to different platform layout are breaking like if i am testing at windows
laptop everything is fine but while i am testing at mac laptop layout are braking i am not able to understand where is the problem it is related to a browser or related to OS.

quasar links

    <link href=",300,400,500,700,900|Material+Icons" rel="stylesheet" type="text/css">
    <link href="" rel="stylesheet" type="text/css">
<script src=""></script>
    <script src=""></script>

config object

app.use(Quasar, {
  config: {
    brand: { // this will NOT work on IE 11
      primary: '#e46262',
      // ... or all other brand colors
    notify: {...}, // default set of options for Notify Quasar plugin
    loading: {...}, // default set of options for Loading Quasar plugin
    loadingBar: { ... }, // settings for LoadingBar Quasar plugin
    // ..and many more

Looking at the Browser compatibility of Quasar, I don’t see IE listed (your code comment specifically mentions IE 11 as not working.) Remember that IE is being retired so I see little point in designing for it.

Have you tried testing the framework outside Vue to see if you get the same results? If you do, it is not a Vue issue, but a framework or framework configuration issue. If you don’t, it is (potentially) a Vue issue.

Vue 3 doesn’t support IE11 and they’ve dropped plans for backward compatibility. If you need IE11 support then you need to use Vue 2.

1 Like