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);
    transform: translate3d(0,0,1px);

Which I've done and it now shows on top. But clicking, clicks through the element. So if the option is above my submit button and I click it. The form submits with nothing selected.

I've tried in my JS code to add a class like this with the default values being z-index : -1 and position: relative.

.searchListShow{
    z-index: 999;
    position: absolute !important;
}

Nothing is working. There's loads of options on places like Stackoverflow but no solutions.

Help.