Публикации в категории «CSS/HTML Hacks»

CSS and HTML hacks for you and myself to remember

IFrames Same Origin Policy for non-matching Domains

If you want to access an iFrame content or a parent window content from within iFrame with Javascript, you’ll find out soon that because of security restrictions it is impossible to access anything under window, document. This is so called same origin policy.

The reason behind that is security. If you have yoursite.com in one window and gmail.com in another one, then you’d not want a script from yoursite.com to access or modify your mail or run actions in context of gmail on your behalf.

Windows can work in contexts of each other only if they are from same protocol://domain:port, or, shortly, from same origin.

[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 Антон Белоусов