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

<head>
    <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet" type="text/css">
    <link href="https://cdn.jsdelivr.net/npm/quasar@2.0.3/dist/quasar.prod.css" rel="stylesheet" type="text/css">
  </head>
<script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.prod.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/quasar@2.0.3/dist/quasar.umd.prod.js"></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