Samsung S3 Image Blurry Problem

This is a strange bug with S3. Set these both on image tag would do the trick:

-webkit-backface-visibility: hidden;

Unfortunately, the exact same method cause error on S4, and S3 and S4 have the same screen width/height, 320×640. So instead of writing pixel-accurate @media stylesheets, use:

var ua = window.navigator.userAgent.toLowerCase();
window.platform ={
    isS3: ua.match(/gt\-i9300/i)!==null
if (platform.isS3){
    $('img').css{'opacity': 0.9999, 'webkitBackfaceVisibility': 'hidden'};

PS: Doesn’t work with background image.


Stacking Context

In IE9, if two parent elements don’t have z-index set, their children who do have z-index could jump out of the flow of z-index.

In the flow of all DOM elements, there is something that decides the order of appearance among each other: the stacking context. And its behaviour is somewhat odd in some cases.

Continue reading