Веб-приложение для iPad - невозможно выбрать / скопировать / вставить в поле ввода после преобразования CSS

Question

All

Я работаю над веб-приложением (исключительно для iPad), в котором используется модифицированная версия Coda Slider (http://www.ndoherty.biz/demos/coda-slider/2.0/).

Одна из выдвижных панелей содержит текстовое поле.

Когда я использую неизмененную версию слайдера, он прекрасно работает. Я могу щелкнуть текстовое поле, чтобы получить фокус, и функции выбора / копирования / вставки iOS работают как обычно.

Однако по умолчанию Coda Slider использует jquery.animate (). Поскольку я ориентируюсь исключительно на iPad, я решил заменить animate () на CSS3, -webkit-transition, -webkit-transform и translate3d. В результате получается более плавная анимация, так как tranlate3d имеет аппаратное ускорение.

В рамках моей модификации я настраиваю «левый» стиль вместо «marginLeft» (свойство, которое Coda Slider анимирует по умолчанию).

Пока - так хорошо. Все работает, как я и надеялся.

Единственная проблема - хотя я все еще могу щелкнуть текстовое поле ввода, чтобы сосредоточиться на нем (и клавиатура все еще работает, чтобы позволить мне печатать) - функции Select / Copy / Paste не работают.

Другими словами - вы можете печатать в поле, но если вы нажмете и удержите - вы не получите всплывающее меню «Выбор / Копирование / Вставка».

Для тех, кто не знаком с Coda Slider - короче говоря, каждая «панель» ползунка - это div, а все панели оборачиваются в контейнерный div. Анимация работает, перемещая контейнерный элемент div влево и вправо внутри тега div с переполнением, установленным на скрытый.

Как я уже говорил - по умолчанию ползунок Coda перемещает контейнер div влево и вправо, регулируя его свойство marginLeft.

Пока я сохраняю такое поведение - выбор / копирование / вставка работает нормально. Как только я поменяю его на использование свойства left, вместо marginLeft - select / copy / paste перестанет работать.

Кто-нибудь сталкивался с этой проблемой раньше? Я не знаю, связана ли проблема с моей реализацией, моей модификацией кода Coda Slider по умолчанию или чем-то еще.

Большое спасибо заранее за любой совет или понимание.

Answer 1

Определенно существует проблема с подключением яблок к веб-киту для этих длинных событий нажатия на лупу и копировальную пасту и т. Д.

Из небольшого эксперимента видно, что позиции translate3d просто сбрасываются со счетов.

Единственная найденная мною обходная задача - это сразу же обновлять левую и верхнюю части, как только закончится анимация, и удалить 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>

Я уверен, что это должно быть классифицировано как ошибка