iOS: Make divs not have a shadow on touch

Similar to a previous Android issue, except this time for iOS.  It’s not really a problem per-se, but it can make your UI look less clean.  What happens by default in mobile webkit is that when you hold your finger on an element, a grey transparent box is overlayed on it.  To remove this, use the following CSS property:

-webkit-tap-highlight-color:rgba(0,0,0,0);

What really matters is the last value in the 4 values, which sets the opacity to 0, in other words, makes it transparent.

Safari 5.0.5 won’t play HTML5 video

Trying to play HTML5 video in Safari but getting a blank video screen?  Possibly with 0:00 second video length?

I posted the solution over on SO but basically this head scratcher can be solved by using a full URL for the <video>’s src attribute.  If you don’t, Safari doesn’t even try to fetch the video.

I think this bug is only present in very specific versions of Safari (possibly just 5.0.5).

SCRIPT438: Object doesn’t support property or method ‘bind’

The problem: Internet Explorer 8 and below don’t support the ‘bind’ method (not to be confused with jQuery’s .bind()).

To fix, simply add the .bind method to the Function prototype.  Instructions to do that can be found here.


if (!Function.prototype.bind) {
 Function.prototype.bind = function (oThis) {
 if (typeof this !== "function") {
 // closest thing possible to the ECMAScript 5 internal IsCallable function
 throw new TypeError("Function.prototype.bind - what is trying to be bound is not callable");
 }

var aArgs = Array.prototype.slice.call(arguments, 1),
 fToBind = this,
 fNOP = function () {},
 fBound = function () {
 return fToBind.apply(this instanceof fNOP
 ? this
 : oThis || window,
 aArgs.concat(Array.prototype.slice.call(arguments)));
 };

fNOP.prototype = this.prototype;
 fBound.prototype = new fNOP();

return fBound;
 };
}

Android browser CSS position: fixed bug (solved)

There’s a very annoying bug in Android browsers that’s not intuitive to fix: Sometimes position:fixed just doesn’t work right.  For me this manifested as the browser thinking that the bottom of the page was about 40px higher than it actually was, but only in landscape mode.

Without further ado, the fix is simple: set your meta viewport tag to not allow user-scaling.

<meta name="viewport" content="width=100%; initial-scale=1; maximum-scale=1; minimum-scale=1; user-scalable=no;" />

 

Conditionally Display High Resolution Images in HTML/CSS for Retina Displays

It’s really easy to do but I tend to forget how to do it since it’s only applicable to mobile projects:

Let’s say you have: 200px by 100px image.png and the same image twice as large (400px by 200px) called image_highrez.png.

First, we can’t just use a plain ol’ <img> tag. We have to use the commonly done trick of creating a div with the same height/width as the image, then setting the background to the image. Anyone who’s used CSS sprite sheets should be very familiar with this process.

HTML:

<div id="our-image"></div>

CSS:

div#our-image {
  background-image: url(image.png);
  height: 100px;
  width: 200px;
}

@media only screen and (-webkit-min-device-pixel-ratio: 2) {
  div#our-image {
    background-image: url(image_highrez.png);
    background-size: 200px 100px;
    -webkit-background-size: 200px 100px;
  }
}

Easy!