Jquery Animation изначально не работает в Safari

Question

У меня есть галерея, которая выполняет серию анимаций при нажатии на миниатюру.Одна из этих анимаций - изменение размера содержащего блока - работает, как и ожидалось, в IE / Firefox, но сначала не работает в Safari, а затем работает, как и ожидалось, при последующих щелчках.Галерея, использующая аналогичный сценарий на странице «Установки» сайта, страдает той же проблемой, только там не удается вычислить правильную ширину.

Я уже пытался перейти с $(document).ready() на $(window).load() без успеха.Я отчаянно нуждаюсь в решении;этот проект был отложен из-за этой проблемы, и я не разработчик, поэтому я не имею ни малейшего представления о том, что может пойти не так.Я был бы бесконечно благодарен за любую помощь.

Вот ссылка на живой сайт .Код ниже:

$(window).load(function() {
            $('#back').hide();
            $('#full-wrap').hide();
            $('#thumb-wrap a').children().not('img').hide();//hide image captions

            var moveIt = $('#thumb-wrap').outerWidth(); //Get the width of the thumb-wrap div
            /*if ($.browser.webkit) {
                    var moveIt = $('#thumb-wrap').css({width: '100%'});
                    $('#full-wrap').width(383);
                }*/

            $('#thumb-wrap a').click(function(){

                var $big = $(this).index(); //get 0-based index of the thumb that was just clicked
                $('#ajax-content > h1').hide();//hide the page title
                $('#thumb-wrap').hide(); //hide the thumbnails
                $(this).children().not('img').clone().appendTo($('#gallery-wrap')).wrapAll('<div class="article"/>').delay(600).fadeIn(); //Clone the image captions and wrap them in an article
                $('#back').fadeIn(500); //make the back button appear

                $('#full-wrap img').eq($big).siblings().hide(); //Hide all fullsized images that don't match the index of the clicked thumb
                $('#full-wrap img').eq($big).show(); //reveal fullsized image that does match the index of the clicked thumbnail


                $('#content').animate({'maxWidth': '+=' + moveIt * 0.5 + 'px', 'left': '6%'}, 'slow');
                $('#full-wrap').show(100).animate({ 'right': '+=' + moveIt * 0.75 + 'px'}, 'slow'); //slide out by a distance equal to the width of thumb-wrap.

            });

            $('#back').click(function(){
                $(this).fadeOut();//hide the back button
                $('.article').remove();//remove the article div
                $('#full-wrap').animate({'right': '0', 'opacity' : 'toggle'}, 400);//hide the fullsize image div
                $('#content').animate({'maxWidth': moveIt, 'left' : '43%'}, 400);
                $('#thumb-wrap').delay(500).fadeIn(500);//reveal the thumbnails
                $('#ajax-content > h1').delay(500).fadeIn(100);//show the page title

            });

         });


<div id="gallery-wrap">
    <a href="#" id="back"><h3>Back</h3></a>
    <div id="thumb-wrap">
        <a href="#">
            <img src="http://www.qp2creative.com/clients/dfrank/images/11t.jpg" alt="DC1F" />
            <h1>DC1F</h1>
            <p>Material: Merino wool, raw silk, silk gauze, cashmere, wild silk, raw linen and silk yard.</p>

        </a>

        <a href="#">
            <img src="http://www.qp2creative.com/clients/dfrank/images/6t.jpg" alt="DC2F" />
            <h1>DC2F</h1>
            <p>Material: Merino wool, silk organza, and wild silk.</p>
        </a>

        <a href="#">
            <img src="http://www.qp2creative.com/clients/dfrank/images/10t.jpg" alt="DC3F" />

            <h1>DC3F</h1>
            <p>Material: Silk organza, merino wool, handspun wool and silk, and raw silk. Dyed with color derived from weld.</p>
        </a>

        <a href="#">
            <img src="http://www.qp2creative.com/clients/dfrank/images/8t.jpg" alt="DC4F" />
            <h1>DC4F</h1>
            <p>Material: Merino wool, silk organza, raw silk, raw linen, and Wensleydale wool. Dyed with color derived from onion skins. </p>

        </a>

        <a href="#">
            <img src="http://www.qp2creative.com/clients/dfrank/images/18t.jpg" alt="DC5F" />
            <h1>DC5F</h1>
            <p></p>
        </a>

        <a href="#">
            <img src="http://www.qp2creative.com/clients/dfrank/images/9t.jpg" alt="DC6F" />

            <h1>DC6F</h1>
            <p>Material: Merino wool, silk chiffon, raw silk, and raw linen.</p>
        </a>

        <a href="#">
            <img src="http://www.qp2creative.com/clients/dfrank/images/22t.jpg" alt="DC7F" />
            <h1>DC7F</h1>
            <p>Material: Natural yak hair, merino wool, raw silk, and handspun silk.</p>

        </a>

        <a href="#">
            <img src="http://www.qp2creative.com/clients/dfrank/images/23t.jpg" alt="DC9F" />
            <h1>DC9F</h1>
            <p>Material: Merino wool, raw silk, silk organza, and raw linen.
Dyed with color derived from weld.</p>
        </a>

        <a href="#">
            <img src="http://www.qp2creative.com/clients/dfrank/images/19t.jpg" alt="DC10F" />

            <h1>DC10F</h1>
            <p>Material: Merino wool, silk chiffon, and raw silk. Yellow is dyed with color derived from weld.</p>
        </a>
    </div>
        <div id="full-wrap">
            <img src="http://www.qp2creative.com/clients/dfrank/images/11.jpg" alt="DC1F" />

            <img src="http://www.qp2creative.com/clients/dfrank/images/6.jpg" alt="DC2F" />

            <img src="http://www.qp2creative.com/clients/dfrank/images/10.jpg" alt="DC3F" />


            <img src="http://www.qp2creative.com/clients/dfrank/images/8.jpg" alt="DC4F" />

            <img src="http://www.qp2creative.com/clients/dfrank/images/18.jpg" alt="DC5F" />

            <img src="http://www.qp2creative.com/clients/dfrank/images/9.jpg" alt="DC6F" />

            <img src="http://www.qp2creative.com/clients/dfrank/images/22.jpg" alt="DC7F" />

            <img src="http://www.qp2creative.com/clients/dfrank/images/23.jpg" alt="DC9F" />

            <img src="http://www.qp2creative.com/clients/dfrank/images/19.jpg" alt="DC10F" />
    </div>

Answer 1

После некоторой путаницы я выбрал решение кувалдой: я использовал if ($.browser.webkit), чтобы указать ширину пикселей Safari для элементов блока и проценты, как в css. И теперь это работает! И этого достаточно для меня. :)