Fun with CSS3 animations

I have been playing around with CSS3 animations for my day job and so I thought I would apply one to PubCrawler. The location marker now pulses:

The CSS for this is incredibly simple:


.pulse_map_marker{
-webkit-animation: scale_map_marker 2s ease-out;
-webkit-animation-iteration-count: infinite;
}

@-webkit-keyframes scale_map_marker {
0%{-webkit-transform: scale(0.5);}
50%{-webkit-transform: scale(1);}
100%{-webkit-transform: scale(0.5);}
}


It basically scales the image down by half, then back to full size and back to half again over a 2 second period. The “ease-out” part smooths out all of the transitions. I originally tried a slightly different method:


.pulse_map_marker{
-webkit-animation: scale_map_marker 1s ease-out -1s alternate forwards;
-webkit-animation-iteration-count: infinite;
}

@-webkit-keyframes scale_map_marker {
from{-webkit-transform: scale(0.5);}
to{-webkit-transform: scale(1);}
}


Unfortunately, Android does not seem to like the use of the “from” and “to” clauses. Other Webkit browsers such as iOS and Chrome are fine with it. This is just one example of several inconsistencies in CSS3 compatibility between Webkit implementations.

Mobile phone networks can break your website

Sometimes my day job throws up some weird problems. Recently during development of a web app iPhones suddenly stopped loading the JavaScript file. No matter how far we rolled back the code it would not load. Other phones were fine and it had worked on the iPhone in the past. Eventually we found that the problem, of all things, was the mobile network! We only found this out because the JavaScript worked on Wi-fi but not on 3G and all the iPhones we tried were on the same carrier (I won’t say which but it begins with an ‘O’ and ends with a ‘2’). Certain carriers “optimise” web pages before sending them to phones as I found in this blog post. This is supposed to speed up sites on phones but can actually slow them down by introducing latency. We worked around this by putting the JavaScript in line. Luckily the mobile network I personally use doesn’t seem to do this (hint: it’s name is a single digit more than 2 and less than 4, 5 is right out). Next time your contract is up be careful which network you choose!
Fortunately, PubCrawler doesn’t seem to suffer from the issue.
A good way to test and validate a web app post carrier fiddling is to tether a handset to a computer. Then using Firefox with the User Agent Switcher add-on mimic the desired mobile phone. Viewing source will display just how much the mark-up, CSS and JavaScript has been altered. Images are usually transcoded (unless the Cache-Control response header is set to “no-transform”) and linked CSS can sometimes be brought in-line for example.
I think this issue highlights the complexity that mobile developers face when trying to troubleshoot a problem. Dealing with differences between handsets and software is the norm but add carriers to the mix and it makes things even harder.