Vuetify: [Bug Report] v-text-field within v-dialog - text cursor does not appear in correct spot when on iPhone

Created on 13 Dec 2017 · 20Comments · Source: vuetifyjs/vuetify

Versions and Environment

Vuetify: 1.0.0-alpha.2
Vue: 2.5.10
Browsers: Safari
OS: iOS

Steps to reproduce

https://vuetifyjs.com/components/dialogs

Open example #5 Forms and click on the fields...

Expected Behavior

The text cursor would appear in the correct field

Actual Behavior

The text cursor sometimes appears to be many pixels below or above the field, yet the inputted text does appear in the correct spot.

Reproduction Link

https://codepen.io/anon/pen/baNdXV?&editors=101

VDialog bug help wanted platform specific

Source

Mathem8tic

👍4

All 20 comments

Please update the reproduction link (save it first before copying the link)

jacekkarczmarczyk on 13 Dec 2017

👍1

Any recommendations on this? I swapped out the text fields for regular html 5 inputs and they have the same issue. This is an issue preventing a launch of multiple sites so hopefully I can get a work around besides dumping the dialogs all together...

Mathem8tic on 11 Jan 2018

Which iPhone and iOS version? Just checked the codepen on iPhone SE with iOS 10.2 and could not reproduce in any of the text fields

nekosaur on 11 Jan 2018

Using a Iphone 7 version 11.1 currently. I have tried on a few other Iphones with the same result. Everything seems to work accept when interacting with they keyboard. I think the change of height related to the keyboard opening is what bumps the cursor out of alignment with the selected field.

The theory above has proven wrong based on my last test which I only included default html5 inputs. The cursor was out of alignment even when using default inputs.

Mathem8tic on 11 Jan 2018

More information

https://hackernoon.com/how-to-fix-the-ios-11-input-element-in-fixed-modals-bug-aaf66c7ba3f8
https://bugs.webkit.org/show_bug.cgi?id=176896

There seems to be conflicting information on if this bug is fixed in iOS 11.3 beta or not

nekosaur on 8 Mar 2018

😕2

According to the first link posted by @nekosaur, the bug is fixed in iOS 11.3.

jrast on 10 May 2018

Can anyone confirm that it's fixed now?

KaelWD on 10 May 2018

Sorry, I don't have a iOS device, so I can't test. I just stumbled across this issue and thought I update it with the news in the linked article.

jrast on 10 May 2018

👍1

Can anyone that has an iPhone test this on v1.1 alpha?

johnleider on 15 May 2018

I can’t seem to reproduce in either original code pen or the same code pen with @next vuetify urls on iPhone X, Safari on latest OS. Only place where I can come up with a shifted cursor is during autocomplete suggestions which appears to be functioning as expected. I cannot repro anything similar in the links posted by neko.

bdeo on 15 May 2018

I'm having the same issues with the cursor being out of place in safari/chrome ios when using forms inside a dialog (fullscreen and not in fullscreen mode) in text boxes and also in selects with auto-completion. What makes it very interesting is that it doesn't always happen. I'm having these issues in a client's project so I'm not free to submit the code but I will try to figure out a way to reproduce it. I might be able to post a screencast.

"vuetify": "^1.0.18"