Android Webkit: абсолютно позиционированные элементы не соответствуют z-index - PullRequest
Новая
       24

Android Webkit: абсолютно позиционированные элементы не соответствуют z-index

23 голосов
/ 01 апреля 2010

Противный маленький жук, этот.

Как показано в билете Android 6721 , браузер Android, похоже, не учитывает z-index, когда абсолютно позиционированные элементы располагаются поверх тегов <a> или <input>. Я отчаянно нуждаюсь в любом обходном пути. Кто-нибудь победил это раньше?

Заранее спасибо!

Ответы [ 8 ]

11 голосов
/ 08 апреля 2010

Эта проблема, вероятно, связана с элементами управления и их особенностью для браузера.Глядя на вашу проблему (в хром), я обнаружил связанную проблему, что при нажатии клавиши табуляции вы все еще сможете сфокусировать элементы ввода.Вы, вероятно, тоже не хотите этого (независимо от прохождения).Решение на удивление простое: вы пишете свой скрипт для добавления атрибута disabled ко всем входным данным / кнопкам / и т. Д.элементы, которые наложены.Отключенный ввод не сможет получить фокус (с помощью клавиатуры или иным способом), и щелкнуть по нему должно быть невозможно.

Поскольку это также отключает обходную навигацию глупой клавиатуры, это даже не обходной путь,но лучший дизайн, который также работает с навигацией на основе клавиатуры, как и ожидалось.

3 голосов
/ 09 апреля 2010

Чтобы правильно ответить на вопрос, важно прочитать страницу с ошибкой. Проблема не в видимости ввода ниже, а в его «кликабельности».

Я не могу проверить это, но возможны обходные пути:

0 Забудьте абсолютное позиционирование и просто поместите туда два делителя и переключите видимость.

Если Вас это не устраивает ...

1 попробуйте установить абсолютное или относительное положение CSS для всех тегов a и input (Да, это может заставить вас переписать CSS, чтобы сохранить макет, но это того не стоит ?)

2 сделать контейнер <a> -tag: 

 <div style="z-index:100 etc."><a style="width: 100%; height:100%; z-index:101">
     stuff here
 </a></div>

Для того, чтобы содержимое выглядело нормально, потребуется еще немного CSS. Но я ожидаю, что что-то подобное решит проблему.

, если 1 и 2 не помогают попробовать оба одновременно;)

3 , если это все-таки произойдет. Вы можете узнать подробности, что происходит при нажатии. Привязать события клика и mousedown к: link on top, container on top, input in the bottom и зарегистрировать их. Если вы получаете какое-либо из этих событий для верхней ссылки, вы можете попытаться остановить пузырение в какой-то момент или предотвратить событие на входе в нижней части.

Это было бы сложно, но я могу немного помочь. JQuery было бы совершенно необходимо.

2 голосов
/ 13 августа 2014

Добавьте это к CSS каждого элемента, который создает проблему: 

 -webkit-backface-visibility: hidden;
2 голосов
/ 07 апреля 2010

Последние исправления этой проблемы для IE включают, но, вероятно, не ограничиваются следующим списком. Это может помочь решить проблему в Android для вас.

  1. Поместите iframe за абсолютное содержание. Iframe может скрыть эти элементы для вас

  2. Когда вы отображаете свой абсолютный контент, скрываете все проблемные элементы с помощью JavaScript

  3. Определите div в обратном порядке

Точка № 1 считается наиболее надежным исправлением для IE, но, возможно, не самое удачное для вас.

1 голос
/ 07 апреля 2010

Имитировать ВХОД и А с DIV. 

[PSEUDO JQUERY CODE]

<div href="http://google.com" rel="a">Link</div>

<div class="field">
    <div></div>
    <input type="text" style="display: none" />
</div>

<script>
    $('div[rel=a]).click(function() {
        location.href = $(this).attr('href');
    });
    $('.field > div').click(function() {
        $(this).hide();
        $('.field > input').show();
    });
    $('.field > input').blur(function() {
        $(this).hide();
        $('.field > div').html($(this).val()).show();
    });
</script>
0 голосов
/ 16 мая 2014

Если вы хотите решить эту проблему, в первую очередь вы должны добавить z-index в родительскую оболочку и четко добавить z-index к другим вашим элементам, решение состоит в том, что все элементы будут иметь нулевую точку для понимания свойства z-index правильно

0 голосов
/ 09 января 2012

Поместите нижний html в div и установите отображение: ни один не использует javascript, поэтому нижний контент исчезает, вместо того, чтобы быть кликабельным и модальным.

0 голосов
/ 02 апреля 2010

IE имеет ту же проблему, и решение заключается в том, чтобы убедиться, что к каждому элементу, участвующему в позиционировании, и даже к его контейнерам применен z-индекс. В основном, если вы добавляете z-index к 1 элементу в dom, то IE понимает свою позицию z, но не понимает свою позицию z относительно того, что рядом с ним и / или над.

контейнер - z-index 0
дочерний элемент (на верхнем контейнере) - z-index 1
ребенок 2 (прежде всего) - z-index 999

Конечно, все это основано на глупом IE, но стоит попробовать и в Android.

Вторая попытка:)

Я совсем не знаком с браузером Android, но, возможно, надеюсь, что он поможет вам решить вашу проблему. Superfish - это меню javascript, в котором реализовано решение для пунктов меню z-index, когда они выпадают над полями выбора в браузерах. BgIframe - это js, которые они используют для достижения этой цели. Надеюсь, ваш ответ лежит там.

http://users.tpg.com.au/j_birch/plugins/superfish/#sample2

...