Tag Archives: CSS

[Android]: Input Field Issues
-webkit-user-modify: read-write-plaintext-only;

Android bug: label text appears in input field as a watermark or a placeholder

Label text appears in input field as a watermark or a placeholder

There’s an issue in Android web view, at least on HTC EVO and Samsung Galaxy Nexus that causes input field label text to behave just like placeholder: appear as a watermark over the empty input field and disappear as soon as user starts typing (see image).

Also default system styles may apply on input fields when they receive focus, causing layout break, overlapping other elements with a system input field (e.g. search icon will disappear for search field) that quite often can be vertically misaligned with the original input field (see screenshot) if the one is placed in element with position absolute or fixed.…

[CSS]: Text Antialiasing Fix for Opacity or Animation
(backface-visibility)

backface-visibility Text Antialiasing rendering differences for Opacity or Animation in Safari


You must have noticed that while animated or semi-transparent, the text is rendered differently in the browser.
So in Safari when animation ends the font gets more bold antialising with a noticeable change.

A simple way to fix this with CSS3 is to add backface-visibility:hidden property to the container you animate:

backface-visibility:hidden;
-webkit-backface-visibility:hidden;

The property is currently supported only in Webkit browser but you may add other browsers modifiers in case they will add that.

[CSS]: Text Antialiasing Fix for Opacity or Animation
(backface-visibility)
was last modified: August 20th, 2012 by Антон Белоусов