Mobile WebKit 中的 CSS3 过渡变换

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 Safari 中运行时，由于某种原因，动画运行时 span.off 和 span.on 元素不会显示。

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

我也将其放入 jsFiddle 中以供参考:<一href="http://jsfiddle.net/kShEQ/" rel="nofollow noreferrer">http://jsfiddle.net/kShEQ/

Answer 1

Mobile Safari 并不是普通 Safari 和 webkit 引擎的精确克隆。只有一个 webkit 引擎是一个神话，哈哈。 Mobile Safari 以不同的方式呈现过渡。据我所知，输入转换值的语法略有不同。查看这个半类似的 stackoverflow 问题：

缩放问题-webkit-transform 与 iPad 上的移动 safari