CSS Transitions :
From Fixed width to 100% width
I recently tried running this Pen on my IOS7 updated iphone and now both of the events fire, so it looks like this is fixed in mobile Safari 7!!!! This should still apply to IOS6??? I haven't had a chance to test it.
Click on one of the Fixed Width Rectangles to fire the Transitions
Open this pen in Safari and IOS and see that only 1 of the CSS Transitions fires. Then open it up in Chrome or Firefox and see both of the CSS Transitions fire.
The below CSS Transition will not work on Safari and IOS (including Chrome for IOS) browsers because the transition is going from Fixed width to Percentage width.
fixed width 100% width
I found through testing that Chrome and Firefox can transition between fixed (em/px) width and percentage based width, but on Safari and IOS (iphone/ipad - in both Safari IOS and Chrome IOS browsers) the transitions do not work.
The below transition will work on Safari and IOS because it uses 0% width and also has a min-width property for whatever fixed width you need the element to be. Then you can keep your percentage based width on the other class you are using to expand the element and the CSS Transition will still work on Safari and IOS because you are going from 0% width to 100% width, instead of going from a fixed width to 100% width.
fixed width 100% widthClick Here to see the article that helped me