bug 345 - keyboard locks up in iOS WebKit textarea

Issue: #345
Affects: iOS WebKit 536.26 (Safari & Chrome on iPhone, iPad, & iPod)

Note: this issue is specific to iOS.  WebKit running on BlackBerry / Android devices are unaffected by this bug.

Under normal circumstances a TextArea (even in WebKit) works just fine however on iOS6 and WebKit 536.26 there is a bug with textareas if they are within an iframe.


Example:

<iframe src="somePage.html"></iframe>

and then in somePage.html

<textarea cols="60" rows="6">

type a bunch of multi-line content (e.g. "abc" [Enter] over and over)

</textarea>

Yup! that's all the code you need... a textarea in an iframe (very common in today's inline overlay popups).

Just type multiple lines of text (enough to be able to scroll the textarea vertically).

Then re-position the cursor elsewhere in the textarea and try to type again... Denied! The keyboard is almost useless as no characters will render on screen (oddly enough the backspace/delete key still works fine!)

Frustrating isn't it! Gah!

Known Workarounds: One. It isn't obvious but if you dismiss the keyboard or use Previous/Next to jump to another field and come back to the field everything works again!

Related Issues: None.

If you have a SmartPhone or Tablet that runs a WebKit browser (basically any of them except Opera, Firefox (or a Windows 8 tablet)) please try this out and see if we can narrow down the specific versions/Operating Systems affected.


Bug/Site Feedback | Submit a bug

Bug or Feature - Round Six

Round Six Enabling the non-Disabled.

Other rounds: [One|Two|Three|Four|Five|Six]

We're back again with another round of "Bug or Feature?" highlighting a particular behavior in one or more browsers, that, well, could be a Bug, or it could be a Feature... we'll open up the comments for your vote and opinion.

Alright, what's today's "Bug or Feature"?

Synopsis:
Everyone knows that form elements [button|input|select|textarea] can be disabled to stop users interacting with them and to ensure they are not "successful controls" when a form is submitted.

So... what happens if you disable non form elements?

In most browsers... Just like you'd expect... absolutely nothing because it isn't supported.

However in IE there is a different behavior.

In IE when you set the disabled flag on an element it "kinda-sorta" disables all the child elements.

Example:

<div disabled="disabled">
  Email:
  <input type="text" name="foo" value="bar"/><br/>
  Send me spam:
  <input type="checkbox" name="baz" value="yes" checked="checked"/><br/>
</div>

So is it expected that the child elements render disabled? What if you wanted one or more of the children enabled?

Known Workarounds: None.

Related Issues: None.



Bug/Site Feedback |
Submit a bug

bug 523 - disabling option elements fails in Safari on iOS

Issue: #523 Affects: Safari on iOS (iPod, iPhone, iPad) Select options support a disabled attribute so that developers can optionally disable individual options if/when they are not applicable. Safari on the desktop (Windows or Mac) both support this attribute however Safari on iOS (so iPod, iPhone, & iPad) the attribute doesn't actually do anything and the user is free to select the option even though it is supposed to be disabled. Example:

<select>
  <option value="1">first<option>
  <option value="2">second<option>
  <option value="3" disabled="disabled">third<option>
  <option value="4">forth<option>
</select>

If this select list were rendered on an iPhone or iPad you would be able to select the "thrid" option. It's not a Webkit bug, since the same select list will render perfectly on other tablets like the BlackBerry PlayBook.

Known Workarounds: Two. You'll need to either need to remove the options, or inform the user after their selection that it isn't valid (not recommended for usability purposes)

Related Issues: None. Bug/Site Feedback | Submit a bug

bug 132 - slow checking checkboxes required in IE

Issue: #132
Affects: IE6, IE7, IE8, IE9 PP4
Status: Microsoft has confirmed this will NOT be fixed in IE8 RTM

Checkboxes are the perfect form control to select multiple items. In fact they are so good, that the original element designed for this (<select multiple="multiple">) is hardly used because it is so user unfriendly.

They get used everywhere, especially in a long list of items (it could be emails, tasks in a TODO list, or picking your any number of options).

However there is a bug in IE, that forces you to make sure you pick options slowly. The bug is that if you press the Tab key, and the Space bar at the same time, the checkbox control gets "locked" in a strange state, renders "disabled", and stops any other interaction with the rest of the form, the page, the toolbars, the menu or even the window itself!

So, lets analyze this. First off, why would a user press Tab + Space on a checkbox in the first place? Well, if you want to check/uncheck a series of checkboxes quickly, you can Tab through them, and press the Space bar to toggle their status. Once you've mastered this trick, you'll find yourself using it all over the Web.


Example:


Then Tab to the checkboxes, press Space to toggle them, then press Tab and Space at the same time on one.
One
Two
Three
Four
Five
Six
Seven
Eight

Known Workarounds: None. There's no workaround for this issue from a programming perspective, but you can as an end user, press Escape to clear the lock.

Related Issues: None.


Bug/Site Feedback |
Submit a bug

bug 293 - can't disable options in IE

Issue: #293
Affects: IE5, IE5.5, IE6, IE7, IE8, IE9 PP4
Partially Fixed in: IE8 Partner Release 1

MSIE Feedback ID: 336685

Yet another issue with select lists in IE. First you couldn't style them (bug 291) then it turns out, you can't disable them either!

Example:

<select>
  <option>I am valid</option>
  <option>I am valid too</option>
  <option disabled="disabled">I am NOT valid</option>
  <option>I am also valid</option>
</select>

Try it for yourself, load this page up in IE and any other browser.

I am valid
I am valid too
I am NOT valid
I am also valid


Update: IE8 partially fixed this in that you can disable options and thus they render grayed out and can't be selected by mouse - however they can still be selected by alphabetic key presses. (e.g. in the sample above, press "i" until you see that you've selected the disabled option)

Known Workarounds: None.

Related Issues: bug 291.