jQuery animate using a variable doesn't work in OSX Safari

Question

I have a collapse/expand function that works on everything (Chrome/Firefox/IE/Mobile Safari) but is not working in OSX Safari 8.

I've narrowed it down the to the issue stemming from Safari not recognizing my "maxheight" variable while all of the other browsers do. If I change the variable to a number it works fine. These expand/collapse triggers work on content modules with varying max-heights so I need it to be a variable.

Anyone have any experience with Safari causing this issue?

Here is the JS:

jQuery(document).on('click', '.expansion-trigger', function(e) {
    var el = jQuery(this).parent().prev('.expansion-holder');
    var btn = jQuery(this);
    var ex = '.expansion';
    var exp = '.expansion-trigger';
    var hide = btn.removeClass('show').addClass('hide');
    var hd = 'hide';
    var sh = 'show';
    var ele = jQuery(this).parent().prev().prev();
    var maxheight = ele.css('right');
    var gpa = btn.parent().parent();
    e.preventDefault();

    if (btn.hasClass('plus')) {
        hide.parent().next(ex).find(exp).removeClass(hd).addClass(sh);
        el.animate({
            'max-height': 3000
        }, 1000);
        gpa.find('.blur').slideToggle();
    } else if (jQuery('html').hasClass('touch')) {
        hide.parent().prev(ex).find(exp).removeClass(hd).addClass(sh);
        ele.removeAttr('style');
        var marg = ele.offset().top - 60;
        jQuery('html, body').animate({
            scrollTop: marg
        }, 1300);
    } else {
        hide.parent().prev(ex).find(exp).removeClass(hd).addClass(sh);
        ele.animate({
            'max-height': maxheight
        }, 800);
        gpa.find('.blur').delay(400).slideToggle();
    }

});

Associated HTML:

<section class="synopsis">
    <?php if( $synopsis = get_field('show_synopsis') ) { ?>
        <h2 class="content__heading u-mb0">Synopsis</h2>
        <div class="synopsis-holder expansion-holder">
            <?php echo $synopsis; ?>
            <p class="blur"></p>
        </div>
        <p class="expansion">
            <a href="#" class="plus show expansion-trigger">Read more <i class="fa fa-plus"></i>
            </a>
        </p>
        <p class="expansion">
            <a href="#" class="minus hide expansion-trigger">Read less <i class="fa fa-minus"></i>
            </a>
        </p>
    <?php } ?>
</section>

This probably isn't the best solution, but I'm using the right properties in my various holders to reset the max-height values when the modules collapse back down. For example:

.synopsis-holder {
    max-height: 17rem;
    overflow: hidden;
    right: 17rem;
}

Answer 1

I scrapped using the value of the right property and used data-attributes like data-height="17rem" in the markup to store and grab the value.