Following up on the issue I discussed previously here and here, I finally bit the bullet and straightened out the problems caused in the landing page animation by a certain behavior of Android web browsers. After periodically digging around for a solution that addressed the problem of font boosting directly, and finding a lot of expressions of frustrations about it where it’s discussed, I finally decided to just brute force it.
That means test for the browser type and then, if it’s Android, adjust the rendering code a bit to get the desired result. It turned out to be pretty straightforward.
Testing for the browser type is really simple, especially if you only have to test for one.
1 2 3 |
var ua = navigator.userAgent.toLowerCase(); var isAndroid = ua.indexOf("android") > -1; //&& ua.indexOf("mobile"); //the second part turns out not to be necessary |
After that I just needed to write different versions of the initiation calls for the moving text elements of the animation sequence. The graphic elements didn’t need to be changed in this way. I had been a bit inconsistent when I defined the font sizes in the original animation, so I had to do a bit of trial and error to get the Android-specific items the right size, but all 35 of them got done. I think it only took a couple of hours one evening while I watched horror movies hosted by Joe Bob Briggs. Who says programming can’t be fun?
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
var i0 = document.getElementById("intro00"); if (!isAndroid) { bcInitElement(i0,"401px","30px","green","rgba(0,0,0,0)","250px","1","block","<span style='font16'>Most kids dream of being...</span>"); } else { bcInitElement(i0,"401px","30px","green","rgba(0,0,0,0)","250px","1","block","<span style='font-size: 18px'>Most kids dream of being...</span>"); } bcDefineLeftTween("i0",400,20,0.0,0.5,"linear"); bcDefineHideTween("i0",3.25); var i1 = document.getElementById("intro01"); if (!isAndroid) { bcInitElement(i1,"410px","70px","blue","rgba(0,0,0,0)","130px","1","block","a <span style='font24'>Firefighter</span>...<br /><img src='firefighter_001_sm.jpg' width='100px'>"); } else { bcInitElement(i1,"410px","70px","blue","rgba(0,0,0,0)","130px","1","block","a <span style='font-size: 18px'>Firefighter</span>...<br /><img src='firefighter_001_sm.jpg' width='100px'>"); } bcDefineLeftTween("i1",410,30,0.25,0.5,"linear"); bcDefineHideTween("i1",3.25); |
As browser compatibility issues go, this one was simple. If there isn’t a clean solution to whatever issue is causing you problems, then do what you need to do. It may feel like a hack but we don’t always get perfection. A little elbow grease on your part makes life a lot better and more consistent for your users, and usually the cost in terms of complexity and bandwidth is minimal. Your users come first, especially as the number of users grows.
I’m sure there are far weirder incompatibilities out there. Which ones have you seen?