移动WebKit中的WebKit转换

Question

我对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中，一切都很好，但是在Mobile中运行时，由于某种原因，动画运行时span.off和span.on元素不显示。

哪个跨度元素是隐藏的取决于动画的方向。下面是问题的屏幕截图，您会注意到，在动画完成之前，span.off是不会显示的：

​

​

​

​

我还将其放入jsFiddle中以供参考：http://jsfiddle.net/kShEQ/

Answer 1

移动Safari并不是普通safari和webkit引擎的精确克隆。这是一个神话，有一个单一的webkit引擎哈哈。Mobile以不同的方式呈现转换。据我所见，输入转换值的语法略有不同。看看这个半相似的堆栈溢出问题：

Scaling problem with -webkit-transform with mobile safari on iPad