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. ****