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.