2

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:

enter image description here

And here is how it renders in Chrome:

enter image description here

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.

Fer
  • 4,116
  • 16
  • 59
  • 102

1 Answers1

4

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.

thirtydot
  • 224,678
  • 48
  • 389
  • 349