AOL prefixing decimal places in animation

[M-J-Robbins]

When you use a decimal point in an animation, AOL thinks it’s a class name and it’ll get prefixed with aolmail_ so 33.33% becomes 33.aolmail_33%.

Here's a simple test file I sent https://gist.github.com/M-J-Robbins/580b1afeb4c6e223aef5511c289f3ea9

And here it is as rendered in AOL mail https://gist.github.com/M-J-Robbins/e87718699957acb59fdd3cbbb5999081

Note the issue appears on lines 15 and 18

I've tested decimal points in other places such as width:33.33%; font-size:1.5em and they seem to render fine.

[M-J-Robbins]

This is similar to a previous bug that was fixed #14

[hteumeuleu]

I just tested and this bug is still there (even with the Yahoo parser).

The following style block:

<style>
    .box {
        width: 66.66%;
        height: 99.99%;
        animation: test linear 0.3s;
    }

    @keyframes test {
        0% { width: 33.33%; height: 33.33%; background:red; }
        33.33% { width: 44.44%; height: 44.44%; background:green; }
        66.66% { width: 55.55%; height: 55.55%; background:yellow; }
        100% { width: 66.66%; height: 66.66%; background:blue; }
    }
</style>

…is turned into:

 #yiv6523362013 .yiv6523362013box { width:66.66%;min-height:99.99%;}
 _filtered #yiv6523362013 { min-height:33.33%;background:red;}
#yiv6523362013 33.yiv652336201333 {width:44.44%;min-height:44.44%;background:green;}
#yiv6523362013 66.yiv652336201366 {width:55.55%;min-height:55.55%;background:yellow;}
#yiv6523362013 100 {width:66.66%;min-height:66.66%;background:blue;}
#yiv6523362013