Google Chrome and Safari (WebKit) bug with the HTML5 autofocus attribute
I just encountered the weirdest bug with the HTML5 autofocus attribute in Google Chrome and Safari.
Bug description
When using the autofocus attribute in a web page, when using JavaScript to change the CSS of a sibling element, it will not render in Google Chrome 7 and later and Safari 5 (haven’t tested older versions of either).
Prerequisites
A number of certain factors need to be met to encounter this behavior:
-
An
inputelement with theautofocusattribute. -
Two sibling elements to the one with the
autofocusattribute: one visible which will, when clicked, display the other element. -
The CSS code has to be included via a
linkelement – if it’s within the web page in astyleelement, all will work fine. - The page will work the first time it’s loaded, but will fail after a soft reload.
Code being used
This is the code needed to trigger this bug:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Test case: autofocus attribute</title>
<link rel="stylesheet" href="autofocus.css">
<script>
window.addEventListener("DOMContentLoaded", function () {
var help = document.getElementById("help"),
helpInfo = document.getElementById("help-info");
if (help && helpInfo) {
help.addEventListener("click", function (evt) {
helpInfo.className = "show";
evt.preventDefault();
}, false);
}
}, false);
</script>
</head>
<body>
<h1>autofocus bug</h1>
<p>The question mark will be unable to show the help information element, given a few criteria:</p>
<ul>
<li>
An <code>input</code> element with the <code>autofocus</code> attribute.
</li>
<li>
Two sibling elements to the one with the <code>autofocus</code> attribute: one visible which will, when clicked, display the other element.
</li>
<li>
The CSS code has to be included via a <code>link</code> element - if it's within the web page in a <code>style</code> element, all will work fine.
</li>
<li>
The page will work the first time it's loaded, but will fail after a soft reload.
</li>
</ul>
<form>
<input type="text" autofocus>
<a href="/" id="help">?</a>
<div id="help-info">
<p>Some help information...</p>
</div>
</form>
</body>
</html>
CSS
#help-info {
display: none;
}
#help-info.show {
display: block;
}
Demo
You can test this behavior in the autofocus test page.
Did you submit a bug report to the WebKit and/or Chromium bug trackers? You already provided a nice test case 🙂
It works under Windows XP on version 8.0.552.210 beta of Google Chrome.
Haven’t tested it under MacOS.
@Ludvig
Works on Mac OS X 10.6.5 with Google Chrome 9.0.587.0 dev.
Mathias,
Was browsing through the bugs, and it seems to be in bug 49 300 and bug bug 46 088.
Ludvig,
Oh, really? I just tested it on the latest nightly of WebKit and it was still in there.
Doesn’t seem to work in Safari 5.0.3 (6533.19.4) on Mac OS X, but the dev version of Chrome is doing it properly. (See my prev post)
Matthias,
Confirmed that it works ok in Google Chrome 9.0.587.0 from the dev channel. Does not work in the latest nightly of WebKit, though.
[…] This post was mentioned on Twitter by Robert Nyman, Robert Nyman, Robert Nyman, Nicolas Gallagher, Ahmet Akçay and others. Ahmet Akçay said: RT @robertnyman: @ppk Here you go: http://robertnyman.com/2010/11/30/google-chrome-and-safari-webkit-bug-with-the-html5-placeholder-attr … […]
[…] This post was mentioned on Twitter by Robert Nyman, Robert Nyman, Robert Nyman, Robert Nyman, Robert Nyman and others. Robert Nyman said: @ppk Sorry, updated URL: http://robertnyman.com/2010/11/30/google-chrome-and-safari-webkit-bug-with-the-html5-autofocus-attribute/ […]
Hey man, thanks for the report.
I can repro in stable and dev channel, but not in a more recent Chromium build (9.0.595.0 (67404))… so it looks like this got fixed.
At the dev channel’s next update we’ll know for sure. I’ll keep an eye on this one, along with those two tickets.
Cheers.
Paul,
Awesome, thanks! I appreciate it!