SuperCodeBrah SuperCodeBrah - 1 month ago 5
HTML Question

Div only hides if same space is occupied by other HTML element - iOS/Safari only

I've made a simple button to login with Facebook,

fbButton
below, but the button only hides in iOS/Safari Mobile using JQuery
hide()
and
show()
when the space that it occupies becomes occupied by another element.

I'm having no issues with getting the div to hide when running the page on my laptop (Firefox and Chrome), so the issue only exists on iOS. I haven't tested it on Android or otherwise.

<div class="loginSignUp" style="display:none">
<form>
<label class="email" for="email">Email</label>
<input class="email" type="email" id="email">
<label class ="username" for="username">Username</label>
<input type="username" id="username">
<label for="password">Password</label>
<input type="password" id="password">
<label class="confirmPassword" for="confirmPassword">Confirm password</label>
<input class="confirmPassword" type="password" id="confirmPassword">
<div class="formSubmit">Submit</div>
</form>
<div class="loginOr">OR</div>
<div class="fbButton">
<img src="https://www.facebook.com/images/fb_icon_325x325.png" />
<div class="fbTextHolder">
<div class="fbText">Log in with Facebook</div>
</div>
</div>
</div>


Again, the Javascript is simple - just JQuery
hide()
and
show()
.

Any ideas?

Answer

when the space that it occupies becomes occupied by another element.

Sounds like a z-index issue to me?. Does it happen in landscape mode too? Or try using .toggle() instead or .css('display', 'none'); see if the issue persists.

Comments