search

scratchfoundation / scratch-gui

Graphical User Interface for creating and running Scratch 3.0 projects.
https://scratchfoundation.github.io/scratch-gui/develop/
BSD 3-Clause "New" or "Revised" License
4.48k stars 3.59k forks source link

Browser default styles (e.g. mobile Safari) make form inputs have unexpected shading #3003

Open carljbowman opened 6 years ago

carljbowman commented 6 years ago

Lots of browsers (e.g. Safari on iPad) add addtional default styles to field elements. image39

We should audit and evaluate including some CSS overrides into the base field component, such that these addtional styles are overridden.

towerofnix commented 6 years ago

I have the same type of issue with Firefox on Linux, using the Arc Dark GTK theme:

The same inputs as in carljbowman's screenshot, but with dark backgrounds and difficult to read text

I ended up writing a generic userstyle to deal with this (since other sites also get their inputs messed up like that):

input, textarea {
    background: white;
    color: #222;
}

input::placeholder {
    color: #999;
}
benjiwheeler commented 4 years ago

Noticed this during bug hunt, using Safari.

Someone speculated that it may be related to the css problems that contribute to Safari's stack glow issue: https://github.com/LLK/scratch-blocks/issues/1188

benjiwheeler commented 4 years ago

For just the aspect of this issue which is text inputs on mobile Safari, it might be enough to make the .input-form style have a backgrount-color: white and add a .input-form::placeholder style with color hsla(225, 15%, 40%, 1)

When this issue is triaged, I suggest we label this issue help wanted, not for the full CSS audit that Carl described, but just for the coloring/shading of text inputs on mobile Safari.