Unreliable touchend events on iOS5

Unreliable touchend events on iOS5

Click events have a higher latency in web applications because the OS is waiting to see if you are really going to be double tapping.  Touchend events, however, are nearly instantaneous and are perfect for triggering animations and events.  Google, jQuery Mobile and many others rely on these touchend events to make their apps as responsive as native apps. Unfortunately there exists a scenario where the touchend route is very flakey on iOS5.  The touchend event is unreliable when tapping a scrolling <div>.  The <div> must have the overflow style property set to scroll in this case.  I created a simple test page to demonstrate this issue here:   Click here to see the bug in action.   (Make sure to be on an iPad or iPhone with iOS5)   Notice that the incorrect target is logged if you scroll then tap.  This doesn’t happen if you are scrolling the document instead of an overflow:scroll <div>.  It also doesn’t happen if you rely on the click event since that event is never sent.  This is not an issue on android either because android prevents the event from being triggered (just like click on iOS).  It is only an issue when scrolling the <div> and listening for touchend events. You can bypass this whole issue by relying on click events instead of touchend.  However, this kills the responsiveness of your app.  I have worked around this by using timers and scroll event listeners to prevent the touchend event from propagating, but it is very kludgy and not a reliable solution.  I am currently compromising by triggering the action with the click event...
Kill Loud YouTube Ads

Kill Loud YouTube Ads

I have always been neutral with regards to ads on the web.  They suck, but they’re also necessary.  The new ads from YouTube, however, have reached new levels of annoyance that I just had to do something about. YouTube banner ads now start playing audio automatically.  Now, this in itself is annoying.  To make it worse, or even cruel, they don’t start playing the audio until 15 minutes *after* you’ve opened the page.  This means that long after you’ve switched tabs, started listening to music, or even left the room to make dinner, your computer will start blaring this annoying ad.  The obnoxiousness of this is appalling. The solution is simple and I’m sure many, many have already done this.  Install Adblock Plus for Chrome or Firefox: https://chrome.google.com/webstore/detail/cfhdojbkjhnklbpkdaibdccddilifddb https://addons.mozilla.org/en-US/firefox/addon/adblock-plus/ Or, if you use Safari, use Adblock for Safari which uses the same database as Adblock Plus: http://safariadblock.com/download/ This will prevent the problematic banners from even showing.  And now Google, and every other ad company, loses another set of...
Dynamic WebKit Animations

Dynamic WebKit Animations

WebKit animations are a great tool if you want to plot out a predetermined set of keyframes.  As web applications grow in complexity, more flexibility and control is needed in order to take advantage of these features.  One technique you can do is animate based on style changes and use timers to chain animations.  A major issue with this is that -webkit-animation-duration is a guideline and not a guaranteed thing.  This could result in your timer getting fired before the animation is complete. Unfortunately, there isn’t a graceful way to dynamically create these animations.  What you need to do is manually construct the CSS rule and insert it into the style sheet. var animationName = "myAnimation"; var fromStyle = { "-webkit-transform": "scale(0)"; }; var toStyle = { "-webkit-transform": "scale(1)"; }; var key, fromStr = "", toStr = ""; for(key in fromStyle) { fromStr += key + ": " + fromStyle[key] + "; "; } for(key in toStyle) { toStr += key + ": " + toStyle[key] + "; "; } var lastSheet = document.styleSheets[document.styleSheets.length - 1]; lastSheet.insertRule("@-webkit-keyframes " + animationName+ " { from { "+fromStr + " } to { " + toStr + " } }", lastSheet.cssRules.length); You can then assign this animation to your element: element.style.webkitAnimationName = animationName;...