jquery - iPad 网络应用程序 - CSS 转换后无法选择/复制/粘贴到输入字段

Question

全部，

我正在开发一个使用 Coda Slider (http://www.ndoherty.biz/demos/coda-slider/2.0/) 修改版本的网络应用程序(专用于 iPad)。

其中一个滑动面板包含一个文本框。

当我使用未修改版本的 slider 时，效果很好。我可以单击文本框获得焦点，iOS 选择/复制/粘贴功能照常工作。

但是，默认情况下，Coda Slider 使用 jquery.animate()。因为我专门针对 iPad，所以我决定用 CSS3、-webkit-transition、-webkit-transform 和 translate3d 替换 animate()。结果是动画更加流畅，因为 tranlate3d 是硬件加速的。

作为修改的一部分，我正在调整“左”样式而不是“marginLeft”(Coda Slider 默认设置动画的属性)。

到目前为止 - 非常好。一切都如我所愿。

唯一的问题 - 虽然我仍然能够单击输入文本框以在其中聚焦(并且键盘仍然可以让我输入) - 选择/复制/粘贴功能不起作用。

换句话说 - 您可以在字段中输入，但如果您点击并按住 - 您不会看到“选择/复制/粘贴”弹出菜单。

对于那些不熟悉 Coda Slider 的人 - 简而言之 - slider 的每个“面板”都是一个 div，所有面板都包裹在一个容器 div 中。动画通过在溢出设置为隐藏的包装器 div 中左右移动容器 div 来工作。

正如我提到的 - 默认情况下，Coda slider 通过调整它的 marginLeft 属性左右移动容器 div。

只要我保持这种行为 - 选择/复制/粘贴就可以正常工作。一旦我将其更改为使用“left”属性而不是“marginLeft”——选择/复制/粘贴就会停止工作。

有没有人遇到过这个问题？我不知道问题是否特定于我的实现、我对默认 Coda Slider 代码的修改或其他原因。

非常感谢您的任何建议或见解。

Answer 1

对于放大镜和复制粘贴等这些长按事件，apples hook 到 webkit 肯定有问题。

从一个小实验可以清楚地看出，translate3d 位置只是打了折扣。

我发现的唯一解决方法是在动画结束后立即更新 left 和 top，并删除 translate3d(因为它已添加到 left 和 right)。您需要非常小心您的元素所在的整个树的绝对和相对位置。请记住，绝对绝对相对于关闭的绝对定位父级。

这个简单的标记可以证明我的发现:

        <div style="left: 0px; top: 0px; position: absolute;">
            <div>
                    <input type="text" name="fart" value="fart" style="-webkit-transform: translate3d(000px, 0px, 0px); width: 300px; height: 40px;"></input>
            </div>
            <div>
                    <input type="text" name="fart1" value="fart1" style="-webkit-transform: translate3d(50px, 0px, 0px); width: 300px; height: 40px;"></input>
            </div>
            <div>
                    <input type="text" name="fart2" value="fart2" style="-webkit-transform: translate3d(100px, 0px, 0px); width: 300px; height: 40px;"></input>
            </div>
            <div>
                    <input type="text" name="fart3" value="fart3" style="-webkit-transform: translate3d(300px, 0px, 0px); width: 300px; height: 40px;"></input>
            </div>

            <div>
                    <div style="-webkit-transform: translate3d(100px, 0px, 0px);">
                            <input type="text" name="fart4" value="fart4" style="width: 300px; height: 40px;"></input>
                    </div>
            </div>

            <div>
                    <div style="-webkit-transform: translate3d(0px, 100px, 0px);">
                            <input type="text" name="fart5" value="fart5" style="width: 300px; height: 40px;"></input>
                    </div>
            </div>

            <div style="left: 10px; top: 300px; position: absolute;">
                    <div style="left: 10px; top: 100px; position: absolute;">
                            <input type="text" name="fart6" value="fart6" style="width: 300px; height: 40px;"></input>
                    </div>
            </div>


        </div>

我确定它应该被归类为一个错误