:focus pseudo selector does not work/broken for application/xhtml+xml with iOS-6.1.3, chrome-28.0.1483.0 canary (webkit in general?)

[binki]

Ticket #10569 discusses this problem of a non-working :focus but does not completely address every aspect of it.

On webpages served with Content-Type: application/xhtml+xml, selecting elements with jQuery(':focus') breaks at least on iOS-6.1.3 and chrome-28.0.1483.0 canary. This same code successfully filters for focused elements on Mozilla (seamonkey-2.17.1). Also, this selector works fine on webkit when used in CSS rules.

I have written a quick small page to allow comparison. ​http://cdn.ohnopub.net/cdn/binki/jquery-1.9.1-webkit-focus/ links to ​http://cdn.ohnopub.net/cdn/binki/jquery-1.9.1-webkit-focus/focus.html and ​http://cdn.ohnopub.net/cdn/binki/jquery-1.9.1-webkit-focus/focus.xhtml which are byte-per-byte identical but respectively served with Content-Types of text/html and application/xhtml+xml. In the latter page, failure of jQuery(':focus') to select any elements is seen with the aforementioned webkit browsers. Yet,the ability of the :focus CSS selector to define rules for focused elements in all mentioned browsers is demonstrated. Both pages behave identically on Mozilla-based browsers.

Thus, jQuery(':focus') behaves differently between two modern and accepted browser platforms (webkit and mozilla) for Content-Type: application/xhtml+xml.

(Concerning style and performance: In my test page, I use jQuery(':focus') for simplicity. I would normally use .is(':focus') or include :focus at the end of a larger selector expression. In fact, it was while trying to use :focus that way when I stumbled upon this bug, so the above is just a simplified repro. I do not think that jsfiddle.net or jsbin.com let me set the Content-Type to other than text/html, so that is why I do not use either of those services to demonstrate this bug; if I am wrong, please point me to the relevant documentation. Bug also exists in jquery-1.8.3.)

[dmethvin]

Probably related to #13378. The :focus selector is buggy on Chrome (WebKit?) and (even worse) the workaround of using document.activeElement throws a JavaScript error in IE9. So we're screwed either way trying to process :focus cross-browser. For your specific situation are you able to use $(document.activeElement) in place of $(":focus")? I have no idea whether that works in XML+XHTML

[timmywil]

Can you check the current master branch also?

[binki]

​http://cdn.ohnopub.net/cdn/binki/jquery-2.0.0-1-gebecdac-webkit-focus/ uses jQuery master (locked into revision ebecdac from 2013-04-18) and behaves exactly the same on chrome and iOS, working with text/html but not application/xhtml+xml. Mozilla still works fine with it in both cases.

It would be really nice if jQuery(':focus') behaved the same (and as documented) on webkit browsers. I think jQuery is the place to put this cross-browser support code, especially as jQuery is meant to smooth out such browser differences. I think I can, for pragmatic and practical purposes, get away with using document.activeElement as IE is not targeted in any way by my project (but I am going to test that later, just posting the results of my jquery master branch check).

[binki]

Do a hard refresh on my bug reproduction URIs to see that I added document.activeElement to the tests. Windows Chrome and iOS-1.6.3 both disabled document.activeElement for application/xhtml+xml: for XHTML, that property is undefined. I guess they’re trying to be more “strict” than Mozilla is, as it seems that document.activeElement isn’t quite yet official... regardless of all the other unofficial HTML features which webkit supports in application/xhtml+xml.

However, document.querySelector(':focus') seems to work just fine. I’ll use that as my workaround since it is fully supported by all my targets, even by webkit in application/xhtml+xml.

[timmywil]

Your test is not using ​http://code.jquery.com/jquery-git.js

[binki]

The version at ​http://cdn.ohnopub.net/cdn/binki/jquery-git-webkit-focus has been set up and points to jquery-git.js. Same behavior as before, but now you can test if git fixes this bug without copying the testcase locally and configuring Content-Type.

[timmywil]

#14030 is a duplicate of this ticket.

[dmethvin]

Windows Chrome and iOS-1.6.3 both disabled document.activeElement for application/xhtml+xml: for XHTML, that property is undefined.

I think that is more an indictment of XHTML than a bug in jQuery, but either way this is esoteric enough that we're unlikely to find a good fix. Since it is a Webkit-only issue you should report it to them and see if they will fix, which might be relatively quick given their release pace nowadays.