在Android浏览器上使用CSS的-webkit-transform: translate()功能

Question

尽管在iOS和所有桌面浏览器中成功，但我似乎无法在Android浏览器上正确使用translate属性或-webkit-transform。

我的“完整”解决方案是一个小的jQuery函数，如下所示：

$.fn.transition = function (properties, options) {
    var $element = $(this);
    options = $.extend({}, cssDefaults, options);
    properties['webkitTransition'] = 'all ' + options.duration + 'ms ' + options.easing;
    $element.css(properties);
    return this;
};

这被称为：

$element.css("transform","translate(1000px,0px)");

我在一些地方读到，Android已经不支持同时进行多个CSS3动作；然而，即使我用这个简单的虚拟调用替换了所有代码，变换也从未发生：

$element.css("-webkit-transform","translate(1000px,0px)");

我在安卓上做错了什么吗？

- Msencenb

Answer 1

我刚刚遇到了这个问题。

-webkit-transform: translate3d(0,200px,0);

希望这能对你有所帮助。我认为这是Android浏览器中“损坏”的CSS3元素之一。

我必须用 top: 200px; 替换上面的代码。

在你的情况下，我建议使用一个简单的 left，比如 left: 1000px;。

记得使用 position 声明以获得更精确的控制。

- seth yount