Hidden Div prevents access to underlying control

Safari & Web General
Lystig OP
Created Oct ’18
Replies 6
Boosts 0
Views 3.8k
Participants 3

Our web product's default.aspx page contains some 13 divs, of which 10 are small divs, that we change visibility of by java, when needed (change password dialog etc).


This works well on most browsers and OS's. Some versions of iOS ago it worked well on Ipad and Iphone too.

From the latest 3 (including the brand new one) versions of iOS the website does not respond when trying to enter username and password - or clicking the See demo link. We localized the problem to be a hidden div lying above the login dialog. The hidden div do not respond but obstructs the user interaction to go to the visible element, making the page less usefull (Not to say: useless).


First tested with alternative browsers but find it to be a flaw in the iOS, since all browsers had the same (lack of) behaviour.

We chose to wait for the solution, till the recent release of iOS, which unfortunately did not solve the problem.


Now I'm seeking your advise for things I may have forgotten to test for.


For an illustration of the problem try go by our products website: https://winfinans.net/ and click the language flags (Defaults to danish - sorry :-) ) or click the "se demo" (View demo) on an Ipad and on something other than Iphone and Ipad. Notice the difference in behaviour.

Hopefully some of you have had the same experience and the solution to the problem.


Please do not hesitate to post suggestions/questions for details.


Best regards,

Stig Andersen

Replies  6
Boosts  0
Views  3.8k
Participants  3
john daniel OP
Oct ’18

A couple of questions. How "hidden" is this div? Is its display set to none or does it have opacity of 0?


Have you tried using z-index or possibly modifying the DOM when you need to have the div visible?

0
KMT OP
Oct ’18

>This works well on most browsers and OS's.


What types of user-agent strings are you using?

0
Lystig OP
Oct ’18

Hej John,

Thank you for your time.


We use javascript to set style.visibility='hidden' / 'visible'.


z-index only moves the problem - making other regions inaccessible. I've moved the login dialog up front - but when the login process is over - and it gets hidden, it covers for the then visible element beneath.


Modifying the DOM - do you mean moving around with the Div's? i.e. resizing the div and move it to one of the corners when making it invisible?


Best regards,

Stig

0
john daniel OP
Oct ’18
Accepted Answer

There are many different ways in Javascript to set the effective "visibility" of an element. There are many Javascript libraries, which could behave differently on different clients, that complicate such issues. You are going to have to find out, perhaps using Safari's web debugger, exactly what is happening at the lowest level on the problematic client.


You can change z-index just like anything else. Put the element in the front when you need it there. Move it to the back when you don't.


No. I meant creating the element when you need it, where you need it, and then getting rid of it.

0
Lystig OP
Oct ’18

I will conduct some experiments with setting the z-order of the invisible divs and hopefully find a solution.

Please allow me to leave this thread open until I've made my tests.

Thanks for the reply.

0
Lystig OP
Oct ’18

Conclusion

A work-around with a complicated z-index management system has made it work. The solution does not interfere with users of browsers on ordinary computers.

Thanks to the responders of my question. I was a little surprised that no one else has had this problem.

0
Hidden Div prevents access to underlying control
First post date Last post date
 
 
Q