Text not immediately displaying on iOS devices

Hi,

I have a strange behaviour with iOS devices: When typing in text into a textfield, the text is invisible as if it were in white color. But as soon as the focus leaves the field (or the device is rotated) it is suddenly visible!

As you can see in the screenshot (cf. spellchecker), the text is there but not displayed:

any help would be greatly appreciated…

Sometimes I get #ffffff and #000000 mixed up in CSS. Any chance of that? Even in the spell checker, the text is white, showing only because of the grey background

As I said: As soon as the focus leaves the field (or the device is rotated) the text is suddenly visible. Also, on non-iOS devices the text is always immediately visible.

What is even more strange (I hardly dare to write it): If I add the applications URL to my iPhone homescreen and open it from there (so it has the appearance of an app), everything works as expected!

This is reproducible every time.

Hi,

could be a :focus style?

-Olli

The best method to debug is to connect iPhone with MacBook and debug through Safari, or connect to Windows (need iTunes install and there are some good apps to debug Chrome browser). You can see everything as it was on desktop.

You get your answer very quickly.

Unfortunately, I currently don’t have access to a MacBook.

Does this behaviour ring a bell with anybody:

“… What is even more strange (I hardly dare to write it): If I add the applications URL to my iPhone homescreen and open it from there (so it has the appearance of an app), everything works as expected!”

Have you tried eliminating some styles to narrow it down? Maybe there’s some Safari-specific weirdness.

-Olli

no, not yet. It is quite some effort since my only means of testing it with safari is deploying the application in the AWS cloud.

On my desktop with Chrome, Firefox, IE etc. I cannot reproduce it. And on my iPhone I have no means of debugging that I am aware of.

I suspect a JS performance issue, since in other (less complex) forms of the application, the characters are visible but only after a notable delay. Could the widgetset compilation settings have an influence?

It’s worth a look. Use the ?debug url parameter to check how you can use a reduced widgetset.

-Olli

Hi,

Did you solve this problem? I have the same…

Yes, I finally found the cause.

In some scenarios, the z-index was set incorrectly by vaadin for an input field of type text. We fixed it by settint it explicitly:

… input[type=“file”]
{
z-index: 0;
}

Correction: type
file
.

That sounds like a bug in Valo CSS. It would be awesome if it could be fixed in the framework itself. Could you please open a bug at https://github.com/vaadin/framework/issues and state the Vaadin version and a simple way to reproduce the issue (the z-index being set incorrectly)?