CODEWITHSUNDEEP
ioscsscordovauiwebviewoverlap
CWSpear
CWSpear

Reputation: 3270

Weird Overlap of Elements in iOS (PhoneGap)

I'm working on an iOS/PhoneGap project. I have a weird overlap issue in iOS (screenshot from iPad):

Screenshot from iOS

The "Select Status" popover is position: absolute, z-index: 35. The website link is doesn't have a position specified (so static) and no z-index specified.

It makes no matter if the address link is random text with no link, or a link (as captured), it still happens.

Here's what it looks like in Chrome (as expected) (taken on a retina Mac, so it's huge):

Picture is correct is Chrome

I have tried tweaking the z-indexes all day long in Safari's console on the iPad with no effect. It does not seem to be a "simple" z-index issue. So please don't just say "adjust z-index."

[edit] To be specific, I have tried setting the z-index of the popover to 5000 and the web address to -10 (giving it several different positions), and I have checked every ancestor of both elements to make sure none of them have z-indexes (and they didn't). I even tried giving a couple of the ancestors of the popover positions and z-indexes. Nothing ever changed. (And lest it is brought up, I did try changing colors and stuff, just to make sure my changes were making it to the page.)

Thanks.

Upvotes: 4

Views: 4044

Answers (1)

CWSpear
CWSpear

Reputation: 3270

So this has been plaguing our project for about a month, but I think I solved it. I haven't thoroughly tested the theory, but it has solved all of our issues so far.

If you remember way back in the days of IE7, there was a weird z-index bug, and the only way you could fix it was to find ancestors of the offending elements that were siblings and adjust their z-indexes.

For example, let's say this is my markup:

<div class="container">
    <div class="header">
        <button>
            Click Me

            <div class="dropdown">
                <ul>
                    <li>This</li>
                    ...
                </ul>
            </div>
        </button>
    </div>

    <div class="content">
        <div class="col1">...</div>
        <div class="col2">...</div>
        <div class="col3">www.example.com</div>
    </div>
</div>

and like in my images, it looks correct in Chrome, but in iOS, www.example.com is above .dropdown.

Their ancestors that are siblings are .header and .content. If I adjust the z-index (while setting the position to relative, of course) of .header to be higher than .content, it fixed the issue.

Hope that makes sense and helps anything that might come to this page...

Upvotes: 6

Related Questions