z-index not working on IOS browers

I've got a container DIV which has a position of relative. Inside this a text input box and another DIV (resultsContainer). This second DIV has position absolute, z-index of 9999 and has children DIV's added by JS fetch response looping through JSON data.

It works on desktop/laptop browers fine.

The resultsContainer is showing on top of everything fine and provides a list of options.

When on IOS Chrome is shows behind everything else on the page? (as if z-index is being ignored.

I've googled it, gave me this option

    -webkit-transform: translate3d(0,0,1px);

for iOS devices: possible to use tabs?

(I'm using css3/html5)

I used tabs to create 3 columns with vertical rule in middle and right columns. The vertical rule is the same height in both columns (that's the way Iwant it).

1. Is it possible to use tabs when I create a css style sheet for iOS devices (smartphones & tablets)? If so, I have no idea how.

2. Or do I need to use floats?
I didn't use floats because the vertical rule's height is dependent on the height of the text w/i each float. And therefore is uneven because there's more text in middle column than the right column.

Syndicate content