A small blog.

Getting rid of the blue highlight on focus around input boxes on iOS Safari Mobile

When you focus on an input element in iOS, a blue highlight shadow displays when the input field comes into focus.  Searching high and low, the common answer to disable this seems to be by setting the outline:0 in css on focus like:

input:focus {

It didn't work for me.  What else do you need?  Turn off the box shadowing that iOS also adds like this:

input:focus {

Hope that helps!

Read More ...
Tags:   focus  blue highlight  ios  safari mobile  

Event Delegation in iOS Safari - Event Bubbling Safari Quirk

A recent quirk I found with coding for iOS Safari Mobile using event delegation and bubbling in Javascript:

In some cases you may want to perform some event bubbling so that when triggering an event on a DOM element, that event bubbles up to a parent element where you can capture and decide how to react on that event.  This is useful if you are capturing events on DOM elements NOT yet present in the DOM on page load, but later inserted into the DOM by some JS you are running.

In my instance, I was running a search autocomplete pulling results from an externa ...
Read More ...
Tags:   ios  safari  mobile  event bubbling  body  

Prevent iOS Zoom on Text Input Fields

Whenever a user clicks on a html input text field of a web page in iOS, Safari has an annoying little habit of zooming in (albeit slightly) while the soft keyboard comes up.  When a user dismissed the soft keyboard, the browser stays zoomed requiring the user to zoom-out again.  It seems like a slight overlook on Apple's part.   So how do you disable this behavior?

The "proper" way:

Prevent zooming all together by adding this meta tag to your head:  

<meta name="viewport" content="width=device-width ...
Read More ...
Tags:   Mobile Web  iOS  Zoom  Input