Doesn't look good on stock browsers

[josemanuelp]

Hi guys.

First let me congratulate you for this great work. For me the killer features are SSR with streaming, the very low footprint, and the very well crafted boilerplate app.

Sadly, the most limitations are in the CSS area. I can confirm that components doesn't work very well on stock browsers on Android and Windows Phone. For some use cases this is a deal breaker.

I wish I could help, but my personal skills limitations are in this area too. :-(

I will keep an eye on this project. It looks with tremendous potential.

[johnleider]

Could you provide more specifics? Vuetify is made for modern browsers, but it is configured with post-css to go back up to 4 versions. I do have a browserstack sponsorship so I can test these scenarios, I just need to know what they are. I'd be happy to work with you in increasing my browser coverage.

[josemanuelp]

Of course Jhon.

An example:

  <v-app  top-navbar >
    <header>
      <v-navbar class="white">
        <img class="logo" height="48px" style="margin:10px;" src="~public/logo.png" alt="logo"></img>
        <v-spacer></v-spacer>
        <v-navbar-items >
            <v-navbar-item
                v-bind:item="{ href: '#!', text: 'more_vert', icon: true }"
                v-dropdown:dropdown
            ></v-navbar-item>
        </v-navbar-items>
        <v-dropdown id="dropdown" right>
            <v-dropdown-item v-bind:item="{ href: '#!', text: 'action 1' }"></v-dropdown-item>
            <v-dropdown-item v-bind:item="{ href: '#!', text: 'action 2' }"></v-dropdown-item>
            <v-dropdown-item v-bind:item="{ href: '#!', text: 'action 3' }"></v-dropdown-item>
        </v-dropdown>
      </v-navbar>
    </header>
...

and

    <v-container style="padding:0em;">
      <v-row style="background-color:blue;">
        <v-col xs8 style="text-align:left;padding:0em;">
          <v-btn v-dropdown:dropdown1 style="background-color:blue;color:white;">
            Ordenar Por
          </v-btn>
          <v-dropdown id="dropdown1" v-bind:items="items"></v-dropdown>
        </v-col>
        <v-col xs4 style="text-align:right;padding:0em;">
          <v-btn v-dropdown:dropdown2 style="background-color:blue;color:white;">
            <i class="icon-filter">
          </v-btn>
          <v-dropdown id="dropdown2" v-bind:items="items2"></v-dropdown>
        </v-col>
      </v-row>
...

Produces the following:

• Screenshot of Windows Phone: Damaged layout and button doesn't capture click event.

• Screenshot of Android S4 stock browser: Doesn't hide dropdown list div.
  

[johnleider]

I have been able to replicate the issue on windows phone, but not android. Is there an example setup you can provide? I've tested all the way down to android 4.4.

[josemanuelp]

Hi John.

I could reproduce it with android 4.4 stock browser. In chrome it runs just fine.

In order to try with stock browser in browserstack I had to exit default browser, then look for stock browser in the bottom launcher.

[johnleider]

I've replicated the behavior described and will see what it would take to support these.

[johnleider]

This will be a future initiative. Windows phone is definitely important. I'm not sure if I feel the same in regards to the stock browsers, but I will definitely try.

[LuminescentMoon]

I don't think supporting Android versions less than Lollipop is a good idea. It's like trying to support IE8 and below. The stock browser uses (the Chrome-based) Android's System Webview. Android Lollipop and above has its updates decoupled from OS updates so it gets them through the Play Store. This means said Android versions always has their browser up-to-date. The same couldn't be said for any Android version below that.

[johnleider]

After much deliberation, I've decided that the market share for these users are so low that it would take more effort to support than what I am willing to offer. You are free to submit a PR if you so choose.

[lock]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs. Please direct any non-bug questions to our Discord