Question

所有

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

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

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

但是，默认情况下，Coda Slider使用jquery.animate（）。由于我专门针对iPad，我决定用CSS3，-webkit-transition，-webkit-transform和translate3d替换animate（）。结果是更平滑的动画，因为tranlate3d是硬件加速的。

作为我修改的一部分，我正在调整“左”样式而不是“marginLeft”（默认情况下Coda Slider动画的属性）。

到目前为止 - 太好了。一切都按照我的希望运作。

唯一的问题 - 虽然我仍然可以单击输入文本框以对焦（并且键盘工作仍然可以让我输入） - 选择/复制/粘贴功能不起作用。

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

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

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

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

之前是否有人遇到此问题？我不知道问题是否特定于我的实现，我对默认Coda Slider代码的修改，或者别的什么。

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

Answer 1

对于放大镜和复制粘贴等长按事件，苹果挂钩到webkit肯定存在问题。

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

我发现的唯一工作是在动画完成后立即用left和top立即更新，并删除translate3d（因为它被添加到左侧和右侧）。你需要非常小心你的元素所在的整个树的绝对和相对位置。请记住绝对绝对是关闭绝对定位的父。

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

        <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>

我确信它应该被归类为错误

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

1 个答案: