Jquery- android chrome上的布局，可拖动对象在拖动时不会始终可见

Question

在这里修改jquery draggables，jquery-layout和meteor：

现在在androiddragissue.meteor.com上编辑它

在手机(G7100)上，chrome中的图片是可拖动的，但尽管zindex很高，但图片并不总是显示在顶部。

向左拖动它，它就会变得可见，将它拖回页面的垂直中心，它就会消失。

我正在使用一个库来使用触摸事件，比如click，jquery.ui.touch-pench.min，它在过去运行得很好。

一些咖啡..。

if Meteor.isClient
  Meteor.startup ->
    $(document).ready ->
      console.log !$('.ui-draggable'), new Date
      $('.face').draggable
        helper: (ev,ui) ->
          $(this).clone().appendTo("body")
          .css
            "z-index": 99999
            "position": 'absolute'
          .show()

这个问题似乎是android的局部问题，比如ios设备运行得很好。有什么想法吗？

谢谢!

Answer 1

这似乎是一个Chrome for Android GPU分层错误。我将尝试创建一个简化的案例并发布一个到工单的链接，但同时，这里有一个解决方法：

.face {
  -webkit-transform: translateZ(0);
}

作为一个额外的好处，这会将图像提升到GPU，使其在页面中移动更加平滑。