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.

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!