Vuetify: v-select does not show the select items when in fullscreen v-dialog on iPhone

[kwindo]

Reproduction Link:

https://codepen.io/kimsanka/pen/zEWgJz

Versions:

Vuetify: 0.16
iPhone 7+: iOS 11.0.1

What is expected?

For the select to show the select items on tab

What is actually happening?

The select changes color but does not show the select items

Bug noticed on:

iPhone 7+, Chrome + Safari

[johnleider]

This has to do with a bug in the menu positioning on mobile when the keyboard expands. We are more than likely going to convert the menu to a dialog on mobile to eliminate the issue entirely

[kwindo]

Good to read @johnleider . Looking forward to see the solution. Thanks.

[johnleider]

Woo me too. This is a tricky one

[alex-red]

I see this same issue in my app and with the codepen in Safari on the Mac, so not just on mobile.

[johnleider]

I am having difficulties debugging this with Browserstack, does anyone have a native device that could troubleshoot?

[kwindo]

I don't have very much experience in software testing but Is there something I can do to help?

[amritk]

@johnleider the problem is the z-index
Looks like a z-index if 204 is being added on chrome and on android, but not on safari. On safari its z-index:8

[amritk]

The problem seems to be coming from

<div class="dialog dialog--active dialog--fullscreen" style=""></div>

which has a z-index of auto on chrome and 0 on safari. I think it has to do with the way safari handles position fixed

[jingzheshan]

I can reproduce this error on iPad Chrome 62 on iOS 11.1. Also if you have a toolbar with a menu on it, it will have the same behavior.

[giray123]

I believe you should add below css to body when the dialog opens. I have the same problem on text fields that the blinking cursor is not on where it is supposed to be. I had a similar issue on another framework and solved it this way. I could try but I could not find a callback for dialogOpen hook.

position: fixed !important;

[amritk]

@giray123 you can watch the model value of the dialog to catch when it opens

<v-dialog v-model="open">
...
@Watch('open')
openWatcher () {
    if (this.open) {
        // Do your hack
    }
}

[veloace]

I had this same problem, as a temporary workaround, I added this line of code:

.menuable__content__active { /*Fix for Safari dialog display. Reference Vuetify issue #2111 */ z-index:250!important; }

Anyone have an idea for a timeline on a legitimate Vuetify fix? This feels sort of hacky and this issue is still showing itself as of 1.0.0 Alpha-1,

[johnleider]

No ETA as I cannot properly test this issue. @jingzheshan helped with another iOS related bug, potentially he could lend a hand here as well. [Help Wanted] tag is up if anyone feels froggy.

[veloace]

Thanks @johnleider--I would help if I could, but I'm more of a backend guy and not too comfortable with CSS. Thanks for creating Vuetify BTW--it's a lovely help for my project.

[jingzheshan]

Sure, I'd like to address those iOS related issues. I will take a look.

[FabianSilva]

I can test on a iphone7 plus checking a codepen or some web and see if that works. Not sure if can help on something more.

[johnleider]

Essentially anyone with an iOS devices that can test on their local and step through to resolve the issue.

[mi1971]

Hey guys, may be obvious, but menu's are doing the same. In fullscreen dialog, they won't show on mobile.
Code Pen: https://codepen.io/matt-ireland/pen/oEvrrE

[chris104957]

I'm seeing the same issue in Safari 11.0.1 on OSX 10.13.1.

The z-index in Safari is 8. On the same machine, using Chrome, its 204 and the options display correctly

[aldrinmartoq]

Hi @chris104957 @jingzheshan @johnleider

I was debugging (console.log) and found the root cause, but don't know how to solve it.

When a full-screen dialog is shown with a select, the HTML is something like this:

<div class="dialog__content dialog__content__active" style="z-index: 202;">
  <div class="dialog dialog--active dialog--fullscreen dialog--scrollable">
       … many more nested elements …
            <div class="menu">

So Vuetify will try to put your select/menu above the current dialog + 2 (z-index: 204). It doesn't know what's the current z-index for the menu, so it starts looking the z-index from the select/menu up to every parent until it founds a valid z-index. This is done by getMaxZIndex() which calls getZIndex(base).:
https://github.com/vuetifyjs/vuetify/blob/2138f408d24932e965fd55ab4b6c148be99bdaf3/src/mixins/stackable.js#L39-L43
https://github.com/vuetifyjs/vuetify/blob/2138f408d24932e965fd55ab4b6c148be99bdaf3/src/util/helpers.js#L119-L125

The problem is that getZIndex(base) returns 0 in Safari. For some reason, when getZIndex calls document.defaultView.getComputedStyle() in Safari it returns "0" for the second div div.dialog--active while in Chrome it returns "auto".

Because it returns "0", getZIndex stops and returns the wrong z-index:0 for the dialog; on Chrome getZIndex continues to look up the z-index of the parent, which has style="z-index: 202", and returns z-index: 202 for the dialog.

You can reproduce this with the following:

1. Visit the reproduction link: https://codepen.io/kimsanka/full/zEWgJz/
2. Press the blue button to open the dialog
3. In the javascript console, choose the result frame
4. In the javascript console, run: el = document.querySelector('.dialog.dialog--active'); document.defaultView.getComputedStyle(el).getPropertyValue('z-index')

Here is a screenshot for Safari, it returns the string "0"

Here is a screenshot for Google Chrome, it returns the string "auto"

This happens in iOS 11 & Mac OS X Safari 11.

[aldrinmartoq]

A temporary workaround is to add the z-index to the div.dialog--active element. Long term solutions could be:

1. fix the getZIndex() function, so it works well in Safari.
2. "fix" how vuetify creates elements so it doesn't hit the Safari bug. It seems to be something related to position: fixed, but I'm not css neither javascript expert.

I just published my workaround, and it works well for us. If you want to try it, just do the following:

yarn remove vuetify
yarn add https://github.com/aldrinmartoq/vuetify.git#temp-fix-2111-dialog-zindex

and redeploy your app.

If Vuetify maintainers thinks this is good enough for now, just accept my pull request.

Cheers,
Aldrin.

[KaelWD]

Found this article from 2011, seems like safari is trying to be IE7: http://yagudaev.com/posts/getting-reliable-z-index-cross-browser/

Can you confirm if simply adding .dialog { z-index: inherit } fixes the bug without having to change any JS?

[aldrinmartoq]

Hi @KaelWD

Yes, I confirm .dialog { z-index: inherit } solves the issue

[lock[bot]]

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