Welcome to Code Forum!

Join a community that supports you and your coding journey from day one. We strive to be a friendly, supportive community that empowers everyone to be better developers. By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.

    GIF shows where to locate </> in the thread and or post editor toolbar.
    To learn more about how to use our BBCode feature, review our "How to post your code into threads" here.

    Thank you, Code Forum.

CSS z-index not working on IOS browsers

K

kiwis

Coder
'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

[CODE lang="css" title="CSS"]-webkit-transform: translate3d(0,0,1px);
transform: translate3d(0,0,1px);[/CODE]


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.

[CODE lang="css" title="CSS2"].searchListShow{
z-index: 999;
position: absolute !important;
}[/CODE]

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

Help.
 

New Threads

Latest posts

Share this page

Buy us a coffee!

Buy me a coffee.
Code Academy Advertisement
DataCamp Advertisement

About Us

Code Forum is a community platform where coding enthusiasts can connect with other developers, engage in discussions, ask for help, and share their knowledge with a supportive community. It's a perfect place to improve your coding skills and to find a community of like-minded individuals who share your passion for coding.

Site links

Stay Connected

Back
Top Bottom