使用jQuery mobile touchmove。 CSS转换不符合要求

Question

我可以说，我的预定目标是移动浏览器，并显示我在这里尝试做的事情，demo（div在css过渡的帮助下转到右上角）。

因为您可以看到它在scroll和常规浏览器中正常工作。使用Chrome Canary在移动模拟中尝试此操作可以正常工作。把它带到移动设备不会像预期的那样工作。一旦你停止＆＃34;滚动＆＃34;就会发生transition。现在我尝试了jQuery Mobiles scrollstart，但这与scroll基本相同。
我搜索了这个问题并遇到了touchmove。很公平，它实际上记录了＆＃34;滚动＆＃34;的每一步，所以我把它固定下来。现在这带来了另一个问题，transition不会起作用。会发生什么事情，它会立即在角落里定位并且＃34;保持一个实例＆＃34;其中widget__status的原始位置。

我非常感谢这方面的帮助。

这里是小提琴演示中使用的代码

<div class="widget">
    <div class="widget__start clearfix">
        <div class="widget__status"></div>
    </div>
</div>
<div class="widget__body"></div>

的jQuery

var body = $('body');

$(window).on('scroll', function () {
    var $this = $(this);

    if ($this.scrollTop() == 0) {
        body.removeClass('fixed');
    } else {
        if (!body.hasClass('fixed')) {
            body.addClass('fixed');
        }
    }
});

相关的css

.widget__status {
    position: relative;
    float: right;
    height: 40px;
    width: 40px;
    top: 5px;
    right: 20px;
    background-color: #333;
    -webkit-transition: top 1s, right 1s;
}

.fixed .widget__status {
    position: fixed;
    top: -10px;
    right: -10px;
    margin: 0;
}