С помощью CSS3 переход превращается в мобильной версии webkit

У меня есть переходное преобразование для элемента в CSS3, но всякий раз, когда я запускаю анимацию, кажется, что один из элементов, участвующих в анимации, всегда скрыт на время анимации.

Вот код CSS, HTML и JavaScript:

CSS

    div.toggle {
    font-family: Arial, Helvetica, sans-serif;
    width: 92px;
    overflow: hidden;
    cursor: default;
    border-radius: 3px;
    border: 1px solid #919191;
    float: right;
    position: relative;
    height: 26px
}
    div.toggle div.control-cont {
        display: -webkit-box;
        position: absolute;
        -webkit-transition:all 0.2s ease-in-out;
        width: 155px;
    }
    div.toggle span {
        display: inline-block;
        float: left;
        text-transform: uppercase;
        position: relative;
        float: left;
    }
        div.toggle span.on {
            background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(41,90,178,1)), color-stop(50%,rgba(64,133,236,1)), color-stop(51%,rgba(77,143,239,1)), color-stop(100%,rgba(118,173,252,1)));
            background: -webkit-linear-gradient(top, rgba(41,90,178,1) 0%,rgba(64,133,236,1) 50%,rgba(77,143,239,1) 51%,rgba(118,173,252,1) 100%);
            font-weight: bold;
            color: #fff;
            text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5);
            font-size: 16px;
            width: 57px;
            text-align: center;
            padding-top: 4px;
        }
            div.toggle.important span.on {
                background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(210,102,8,1)), color-stop(2%,rgba(234,115,10,1)), color-stop(4%,rgba(248,123,12,1)), color-stop(50%,rgba(255,140,14,1)), color-stop(51%,rgba(255,153,33,1)), color-stop(100%,rgba(254,188,86,1)));
                background: -webkit-linear-gradient(top, rgba(210,102,8,1) 0%,rgba(234,115,10,1) 2%,rgba(248,123,12,1) 4%,rgba(255,140,14,1) 50%,rgba(255,153,33,1) 51%,rgba(254,188,86,1) 100%);
            }
        div.toggle span.handle {
            border-radius: 3px;
            height: 26px;
            border-left: 1px solid #9f9f9f;
            border-right: 1px solid #9f9f9f;
            width: 39px;
            background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(239,239,239,1)), color-stop(3%,rgba(206,206,206,1)), color-stop(100%,rgba(251,251,251,1)));
            background: -webkit-linear-gradient(top, rgba(239,239,239,1) 0%,rgba(206,206,206,1) 3%,rgba(251,251,251,1) 100%);
            z-index: 10;
            left: -5px
        }
        div.toggle span.off {
            font-size: 16px;
            font-weight: bold;
            color: #7e7e7e;
            background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(181,181,181,1)), color-stop(2%,rgba(207,207,207,1)), color-stop(4%,rgba(223,223,223,1)), color-stop(6%,rgba(231,231,231,1)), color-stop(50%,rgba(239,239,239,1)), color-stop(51%,rgba(249,249,249,1)), color-stop(100%,rgba(254,254,254,1)), color-stop(100%,rgba(251,251,251,1)));
            background: -webkit-linear-gradient(top, rgba(181,181,181,1) 0%,rgba(207,207,207,1) 2%,rgba(223,223,223,1) 4%,rgba(231,231,231,1) 6%,rgba(239,239,239,1) 50%,rgba(249,249,249,1) 51%,rgba(254,254,254,1) 100%,rgba(251,251,251,1) 100%);
            left: -10px;
            text-align: center;
            padding-top: 4px;
            width: 57px;
        }
    div.toggle input {
        display: none;
    }

JavaScript:

(function($) {
    $.fn.toggle = function()
    {
        this.each(function() {
            var toggle_class = ($(this).attr('checked')) ? 'checked' : '';
            var important_class = ($(this).hasClass('important')) ? 'important' : '';
            var this_transformed = false;

            var this_toggle = $('<div class="toggle">
                                    <div class="control-cont">
                                        <span class="on">on</span>
                                        <span class="handle"></span>
                                        <span class="off">off</span>
                                    </div>
                                </div>');

            this_toggle.addClass(toggle_class);
            this_toggle.addClass(important_class);

            var thecheckbox = this;
            $(this).replaceWith(this_toggle);
            this_toggle.append(thecheckbox);

            if(toggle_class != 'checked')
            {
                this_toggle.find('.control-cont').css({ left: '-53px' });
            }

            this_toggle.click(toggle_switch);
            $(thecheckbox).change(toggle_switch);

            function toggle_switch() {
                var self     = $(this);
                var this_off = $(this).find('.off');
                var this_on  = $(this).find('.on');
                var this_container = $(this).find('.control-cont');
                var the_checkbox   = $(this).find('input[type="checkbox"]');

                if($(this).hasClass('checked'))
                {
                    if(!this_transformed)
                    {
                        this_container.css("-webkit-transform", "translate(-53px, 0px)");
                        this_transformed = true;
                    }
                    else
                    {
                        this_container.css("-webkit-transform", "translate(53px, 0px)");
                    }
                    self.removeClass('checked');
                    the_checkbox.attr('checked', false);
                }
                else
                {
                    if(!this_transformed)
                    {
                        this_container.css("-webkit-transform", "translate(53px, 0px)");
                        this_transformed = true;
                    }
                    else
                    {
                        this_container.css("-webkit-transform", "translate(0px, 0px)");
                    }
                    self.addClass('checked');
                    the_checkbox.attr('checked', true);
                }
            };
        });
    };
}) ( jQuery );

По существу, анимация перемещает всю div.control-con вдоль или назад, в зависимости от состояния флажка. Все прекрасно работает в Chrome и Safari, но при запуске в мобильном Safari элементы span.off и span.on почему-то не отображаются при запуске анимации.

Какой элемент span скрыт, зависит от направления анимации. Вот скриншот проблемы, вы заметите, что span.off не отображается, пока анимация не будет завершена:

Я также поместил это в jsFiddle для справки: http://jsfiddle.net/kShEQ/