Experiments in HTML 5 - Part 2.1

Got some time this afternoon to work out why the "bouncing text" animation wasn't working in Chrome. Turns out there were two separate issues Chrome/Webit had with attribute values. In particular the attribute values for keyTimes, values and keySplines.

HTML 5, CSS 3 and Javascript Training

With HTML 5 and CSS 3 you can add animation to your site easily, while the new API's introduced by HTML 5 allow for the creation of full-client side web applications that are dynamic and persistent.

Check out our HTML 5 & CSS training course or our JavaScript course for web application developers.  

Chrome/Webkit doesn't like excess white space in svg attribute values

To get simple animateTransform working in Chrome, i.e no calcMode="spline"  I had to remove trailng white space at the end of the attribute values.

Chrome Likes              : keyTimes="0; 0.5; 1;"
Chrome does not like: keyTimes="0; 0.5 1; "

To be safe I removed all excess white space between parameters used in SVG transformations.

keySplines - Chrome likes space separator Firefox like semi-colon

To get calcMode="spline" woring with animateTransform I had to replace the semi-colons I was using to separate pairs of coordinates for the keySpline attribute with spaces.

Chrome: keySplines=".7 1 1 .9 1 2 1 1" 
Firefox:  keySplines=".7 1 1 .9; 1 .2 1 1:

I added a simple Chrome browser detection variable based on the user agent string to render the values correctly for Chrome. I figure most other browsers will go with a semi-colon between pairs of coordinate values. Not only is this easier to read it is more in-line with how most technologies accept lists of parameters.

See the Pen Jumping Bean by Mark Clarke (@mxc) on CodePen.

Comments