Percentage based transitions issue

[ghost]

I'm working on a responsive navigation that uses percentage based values for layout. This plugins seems to do its job with pixel values, but when it comes to percentages (and possibly other units) it breaks.

The following transition gets converted into 100 pixels by the plugin.

productNavigation.transition({ : "+=100%"...

[jdalrymple]

Im having the same issue at the moment, it automatically converts to a pixel representation of the percentage value

[madskonradsen]

Same issue here... But it seems like the project is abandoned...

[armellarcier]

Abandonned? I didn't get the same idea. Anyway this project is very promissing and on great tracks I feel.

Do contribute if you can!

[madskonradsen]

Yeah, maybe i was just too quick to judge... But it is indeed a nice project...

[jdalrymple]

Oh for sure, just wish i knew how to fix it myself :P

[matthiasak]

The problem isn't actually with jquery Transit

debugging the jquery 1.9.1 source: >>>> value = "-=100%"

    // Get and set the style property on a DOM Node
    style: function(elem, name, value, extra) {
            // convert relative number strings (+= or -=) to relative numbers. #7345
            if (type === "string" && (ret = rrelNum.exec(value))) {   <<<<<<<<<<<<<<<<<<<<< sets ret to ["-=100", "-", "100"]
                value = (ret[1] + 1) * ret[2] + parseFloat(jQuery.css(elem, name));
                // Fixes bug #9237
                type = "number";
            }
    }

The issue propagates down from jQuery when jQuery itself receives a call to $.css() in this plugin

[rstacruz]

Turns out that even other properties in jQuery.fn.css will not handle '+=10%' well:

$('body').css('top', '10%');
$('body').css('top'); /* 49px */

$('body').css('top', '20%');
$('body').css('top'); /* 98px */

$('body').css('top', '10%');
$('body').css('top', '+=10%');
$('body').css('top');
// Expected: 98px (10% + 10%)
// Actual: 59px (10% + 10px)

[rstacruz]

Thanks @matthiasak for pointing that out. I'll be closing this as a "won't fix" because (1) it's not a Transit issue, this is something that should be addressed in jQuery itself, and (2) it's paramount that .transition(...) behave as closely to .animate(...) as possible.