Strange issue in Safari: Cannot select text from an input field

Question

I have a web application where users can edit their profile information. This is presented as a normal web form with input fields containing the existing values:

<form action="<snipped>" method="post" accept-charset="UTF-8" id="frmEditUser">

<fieldset>

<p>
<label for="username">Username</label>
<input type="text" name="username" id="username" value="<?= $uname ?>" size="30" title="must be unique" size="30" />
<label for="username" generated="true" class="error">*<?= form_error('username'); ?></label>
</p>

</fieldset>
</form>

There are more fields, but this simplified markup shows that I am doing nothing out of the ordinary. In both Safari and Chrome (on Windows 7) I am getting some very strange behavior when trying to select existing values in these fields:

When I select from left to right, the selected text is highlighted as expected. When I place my cursor at the end of the field and select from right to left, upon releasing the mouse button the selection is undone and the cursor sits at the end of the field again.

This problem occurs at all input fields and textareas of my application, but only in Safari and Chrome. I thought it might be a javascript problem, but the problem persists when disabling all javascript. Disabling all CSS makes the problem go away.

So the problem is in my CSS. I disabled all CSS rules that have anything to do with forms or form elements, but the problem still remains.

I was hoping there is this odd chance that somebody else encountered the same issue?

Update: The problem is even more fine-grained. It seems to only occur if I select from right to left and in this process of hovering exit the field on the left edge. Not exit as in clicking outside, exit as in hovering out of it whilst still holding the mouse button for the sake of selection.

Update II: I discovered the root of the issue. It happens when selecting from right to left and in this selection process exit the form element, not the field. I added a red border around the form element. As soon as I exit it on the left side, the selection I made is gone. If I add padding to the form element on the left, it shows that the selection remains as long as I stay inside the form element.

Still a bizarre issue that I would like to solve :(

Answer 1

Hey Ferdy,

I read your question and decided to check my site in chrome and found the same issue. Go to my site www.futurekode.com and go down to the contact form and enter your name and email and try selecting the text.

On mine, it only happens to the second input field (the email one) and not the textarea either.

I found that adding display:block to the input field fixes it in chrome but not safari :/

Very weird