Question

Probably I’m being stupid and overlooking something, but I am having a bizarre issue that only occurs in Chrome (12.0.7, but maybe other versions as well). Check out this site:

http://www.jungledragon.com

On the right side, you will notice a community update panel. This is how it looks in any major browser except Chrome:

And here is how it renders in Chrome:

It renders twisties? When you click on one, it expands the row. Clicking again collapses the row. Nowhere in my code do I have any markup to implement such behavior. Is this some kind of special behavior because I am using figure tags? I tested this site in Chrome before and it was no issue then, so it could be a recent bug.

Answer 1

The details element is supposed to exhibit the behaviour you’re experiencing in Chrome.

The spec:

The details element represents a
disclosure widget from which the user
can obtain additional information or
controls.

..

The open content attribute is a
boolean attribute. If present, it
indicates that the details are to be
shown to the user. If the attribute is
absent, the details are not to be
shown.

When the element is created, if the
attribute is absent, the details
should be hidden; if the attribute is
absent, the details should be shown.
Subsequently, if the attribute is
removed, then the details should be
hidden; if the attribute is added, the
details should be shown.

The user agent should allow the user
to request that the details be shown
or hidden. To honor a request for the
details to be shown, the user agent
must set the open attribute on the
element to the value open. To honor a
request for the details to be hidden,
the user agent must remove the open
attribute from the element.

Some version of Chrome 12 (dev channel) added proper support for opening and closing the details element.

According to http://caniuse.com/#search=details, Chrome is the only browser to support this at the moment.

To fix this, I think you should replace the details element with some other element.