To reproduce, In an incognito window try these links on a mobile device running chrome with a small screen (not a desktop or a tablet):
- https://en.wikipedia.org/wiki/User:Amire80/Sections_test#Two
- https://en.wikipedia.org/wiki/User:Amire80/Sections_test#%22Three%22
The first link (Two) works as expected: the page is opened, and the section is expanded.
The second link ("Three") should work the same, it opens the page, but doesn't expand any sections. I'd expect it to open the section, just like with the other link.
Developer notes
Confirmed. There's some code in JS that handles this, that's not executing correctly.
Possibly related: T209418
Works fine on Safari and Firefox.
Works fine for: https://en.m.wikipedia.org/wiki/User:Amire80/Sections_test#.22Three.22
The issue is Toggler.prototype.reveal
It calls
$target = $container.find( escapeHash( selector ) );
In this case this essentially boils down to $('#"Three"') which is an invalid Sizzle selector. Our code catches this silently so we were apparently aware of this possibility.
When a quote is present we need to map this to `$('[id="\\"Three\\""]')
The use of quotes in IDs should likely be discouraged given the workarounds needed. Instead of the MobileFrontend fix we may want to disallow quotes in generated IDs. If we decide to take this route decline this bug and open up a new task requesting that.
Proposed MobileFrontend fix
- Add a method for the edge case to Toggler.js and add tests