[RESOLVED] PHP page doesn't work iPhone
I created a basic website that uses php.
My login form loads just fine on most browsers, and will load/work properly on my Android phone. When the browser loads the page on an iPhone, once the user clicks on the username or password field, the onscreen keyboard shows and there is a cursor in the textbox. However, the iPhone freezes immediately and locks up. Nothing can be done except close the browser!
The form works just fine on my iPad and Android, as mentioned.
Here's the css and form I am using:
Code:
<style type="text/css">
* {
margin: 0px;
padding: 0px;outline: none;
}
body {
background: #666;
}
form {
border: 1px solid #E2E2E2;
width: 250px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
background: -moz-linear-gradient(19% 75% 90deg, #999, #E2E2E2);
background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#E2E2E2), to(#999));
margin:50px auto;
padding: 20px;
-moz-box-shadow:0px -5px 300px #270644;
-webkit-box-shadow:0px -5px 300px #270644;
}
label {
font-size: 12px;
font-family: arial, sans-serif;
list-style-type: none;
color: #000;
text-shadow: #CCC 1px 1px;
margin-bottom: 10px;
font-weight: bold;
letter-spacing: 1px;
text-transform: uppercase;
display: block;
}
input {
-webkit-transition-property: -webkit-box-shadow, background;
-webkit-transition-duration: 0.25s;
padding: 6px;
border-bottom: 0px;
border-left: 0px;
border-right: 0px;
border-top: 1px solid #999;
-moz-box-shadow: 0px 0px 2px #000;
-webkit-box-shadow: 0px 0px 2px #000;
margin-bottom: 10px;
background: #E2E2E2;
width: 230px;
}
input.submit {
-webkit-transition-property: -webkit-box-shadow, background;
-webkit-transition-duration: 0.25s;
width: 100px;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#33F), to(#36F));
background: -moz-linear-gradient(19% 75% 90deg,#36F, #33F);
color: #fff;
text-transform: uppercase;
text-shadow: #000 1px 1px;
border-top: 1px solid #33F;
margin-top: 10px;
}
input.submit:hover {
-webkit-box-shadow: 0px 0px 2px #000;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#33F), to(#36F));
background: -moz-linear-gradient(19% 75% 90deg, #36F, #33F);
}
input.submit:active {
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#36F), to(#33F));
background: -moz-linear-gradient(19% 75% 90deg,#33F, #36F);
}
input:hover {
-webkit-box-shadow: 0px 0px 4px #000;
background: #92A5FE;
}
</style>
Code:
<form id="form1" name="form1" method="POST" action="<?php echo $loginFormAction; ?>">
<div id="logo">
<a href="http://www.mytesturl.com"><img src="images/logo.png" width="250" height="70" alt="logo"/></a>
</div>
<br />
<br />
<label>Username:</label>
<input type="text" name="username" id="username" />
<label>Password:</label>
<input type="password" name="password" id="password" />
<table width="100%">
<tr>
<td align="center"><input type="submit" name="login" id="login" value="Login" class="submit"/></td>
</tr>
</table>
</form>
Can anyone shed a little light on the issue? Thank you!
**** This thread was in Mobile Development. I put in a request to have it moved. Since it wasn't, I do apologize that I had to repost it. ****
Re: PHP page doesn't work iPhone
It doesn't looks like anything with your PHP scripting !
Either it's because of the CSS styles or because of the JavaScript code(if any).
:wave:
Re: PHP page doesn't work iPhone
Thanks. It's bugging me. I don't have any JS, so it has to be the CSS. I wonder what's going on...
Re: PHP page doesn't work iPhone
What model of iPhone? Seems like the older ones can get bogged down by -webkit properties. I'd try getting rid of the transitions first and see if it improves; if not, then start nixing the other vendor-specific properties.
Re: PHP page doesn't work iPhone
It was the -webkit properties. I restyled my form, and it works ok now.
The issue was on a 1st generation iPhone.
That's a great link, SambaNeko. Thank you!