Gray block being the keyboard in login screen

mozilla / webmaker-core

React-based core for Webmaker shared across all platforms

https://foundation.mozilla.org/en/artifacts/webmaker/

Mozilla Public License 2.0

65 stars 39 forks source link

Gray block being the keyboard in login screen #962

Closed ioana-chiorean closed 8 years ago

ioana-chiorean commented 8 years ago

Go to log in
Type user name and password
Dismiss the keyboard

Actual results:

the block being the keyboard is gray
u can barely read the text on it

Expected results:

the block should maintain original blue color and you should be Able to read the text and links on it

xmatthewx commented 8 years ago

Thanks @ioana-chiorean. I wasn't able to reproduce this problem on Nexus 5 with Android 6. Worked fine. Link to your screenshot is broken. Anyone else see this?

alanmoo commented 8 years ago

I think I might have spotted this a few weeks ago....might be something to do with the way the keyboard shrinks the viewport and the height of the blue background being set by vh units.

ioana-chiorean commented 8 years ago

@xmatthewx i did updated the screenshot now. It is not 100% reproducible indeed

xmatthewx commented 8 years ago

Ah. So vh isn't miracle cure for everything. That's too bad.

ioana-chiorean commented 8 years ago

Some more screen just to showcase different looks :cry: :disappointed:

alanmoo commented 8 years ago

I think we may just need to remove #login { height: 100vh }, as the heights of #login's children don't rely on the height of it. Quick testing in the desktop browser seems to show that works.

xmatthewx commented 8 years ago

cc @vazquez