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
JavaScript, Performance

Famo.us Intro

Questions:

1. What is famo.us? What makes it special?

A JavaScript framework which helps you create smooth, complex UIs for any screen. Stress on the smooth part. Famo.us elements are styled with position:absolute and their positions are defined by matrix3d webkit transforms. This is what makes Famo.us performant.

Continue reading →

Standard
JavaScript

Difference between Scrolls

  • window.scrollX: current window horizontal offset number
  • window.scrollY: current window vertical offset number, For cross-browser compatibility, use window.pageYOffset instead of window.scrollY
  • window.pageYOffset: an alias for the scrollY property, but older versions of Internet Explorer (< 9) do not support either property and must be worked around by checking other non-standard properties, see: fully compatible example
  • window.scroll(x, y): absolute scroll
  • window.scrollTo(x, y): absolute scroll, effectively the same as widow.scroll(x, y)
  • window.scrollBy(x, y): relative scroll
  • window.scrollMaxX: the maximum number of pixels that the document can be scrolled horizontally
  • window.scrollMaxY: the maximum number of pixels that the document can be scrolled vertically
  • element.scrollIntoView(alignWithTop): scrolls elements into view
  • HTMLElement.offsetTop: returns the distance of the current element relative to the top of the offsetParent node
  • jQuery’s offset(): returns an object that includes the top and left offset of the element, e.g. Object{top: 223, left: 312.5}
  • jQuery’s offsetParent(): Get the closest ancestor element that is positioned
  • jQuery’s scrollTop(): wraps things up, but it’s the same thing. Also, it could be called to scroll compared to an element. See code below

Continue reading →

Standard