CSS

Flex with Firefox

<div flex="50">
  <p>looooooooooooooong content</p>
</div>

When white-space: nowrap; is used, simply putting overflow: hidden; on <p> is not going to stop it from conquering the parent div and overflowing all over the place. Even if the div has a flex-basis: 50%; to protect itself. That div is going to need a overflow: hidden; too.

Nice job, Firefox 34.0.5.

Standard
CSS

Samsung S3 Image Blurry Problem

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

opacity:0.999999;
-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.

Standard