Android Webkit: Absolutely positioned elements don't respect z-index

后端 未结 8 939
星月不相逢
星月不相逢 2020-12-23 21:55

Nasty little bug, this one.

As illustrated in Android ticket 6721, the Android browser seems to not respect z-index when absolutely positioned elements are laid over

相关标签:
8条回答
  • 2020-12-23 22:13

    Simulate INPUT and A with DIVs.

    [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 讨论(0)
  • 2020-12-23 22:14

    if you want to solve this problem, first of all you must add z-index to parent wrapper and clearly add z-index to your other elements, solution is that all elements will have a zero point for anderstanding z-index property correctly

    0 讨论(0)
  • 2020-12-23 22:21

    Put the under html in a div and set the display:none using javascript, so then the under content is gone, instead of being clickable and modal.

    0 讨论(0)
  • 2020-12-23 22:24

    Add this to the CSS of every element that creates a problem:

     -webkit-backface-visibility: hidden;
    
    0 讨论(0)
  • 2020-12-23 22:27

    To answer the question properly it's important to read the bug page. The problem is not about visibility of the input below, but its "clickability".

    I can't test it, but these are possible workarounds:

    0 Forget absolute positioning and just put two divs there and toggle visibility.

    If this doesn't satisfy You...

    1 try setting CSS position to absolute or relative for all a and input tags (Yup, this might force You to rewrite CSS to keep the layout, but isn't it worth it?)

    2 make a <a>-tag container:

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

    This will need some more CSS to make the content look ok. But I expect something like this would solve the problem.

    if 1 and 2 aren't helping try them both at once ;)

    3 if it still happens You might want to check in details what happens when You click. Bind click and mousedown events to: link on top, container on top, input in the bottom and log them. If You get any of those events for the top link You can try and stop the bubbling at some moment or prevent the event on the input in the bottom.

    This would be difficult, but I can help a bit. jQuery would be quite necessary.

    0 讨论(0)
  • 2020-12-23 22:29

    This problem is probably related to controls and their being special for the browser. While looking at your problem (in chromium) I found a related problem that when you press the tab key you will still be able to focus the input elements. You probably don't want this either (regardless of bleedthrough). The solution is surprisingly simple, you write your script to add the disabled attribute to all input/button/etc. elements that are overlayed. A disabled input will not be able to receive focus (by keyboard or otherwise), and clicking it should be impossible.

    As this also disables silly keyboard circumnavigation it is not even a workaround, but a better design that also works with keyboard based navigation as expected.

    0 讨论(0)
提交回复
热议问题