0

The summary/details HTML5 element has terrible browser support. Therefore I built a non-jQuery fallback to make it work in non-supported browsers (IE and Edge). This fallback uses element.removeAttribute, but I am in doubt about the browser support of this command. I cannot find a definitive answer online. I have tried caniuse.com and MDN web docs, but they have no clear answers.

I know it works in my (updated) version of Firefox. Anyone has more info?

Mr. Hugo
  • 11,887
  • 3
  • 42
  • 60
  • 1
    That is the EXACT link I submitted in my question. It contains mostly questionmarks. – Mr. Hugo Oct 02 '18 at 15:02
  • 1
    Meaning that the support is unknown or not stable. W3Schools conflicts and says all modern broswers support it. https://www.w3schools.com/jsref/met_element_removeattribute.asp – daddygames Oct 02 '18 at 15:07
  • 1
    @daddygames — "We don't know" is not in conflict with "Someone else says they know" – Quentin Oct 02 '18 at 15:08
  • @Quentin I'm simply supporting the OP by confirming that different sources have different information on the topic. However, I would lean towards the MDN being more accurate, which is to say that support is not guaranteed and you should test specific browsers/versions if you can. – daddygames Oct 02 '18 at 15:10
  • I think it is just such as old part of the spec that support is as good as universal and nobody has bothered to test it and update MDN's wiki. – Quentin Oct 02 '18 at 15:13
  • I don't get it... why is this question so bad? I would really like to know the browser support. I can fire up all my VM's to find this out, but I would rather find this on SO or another trustworthy website. – Mr. Hugo Oct 02 '18 at 15:13
  • 1
    @JoostS I removed my down vote on the question. However, I don't believe you're going to get any better answer than the docs referenced. MDN is usually the most up-to-date online document publicly available. – daddygames Oct 02 '18 at 15:20
  • Can you add that as an answer? It is somewhat unsatisfying, but I am willing to accept that, as I am simply asking for 'more info'. – Mr. Hugo Oct 02 '18 at 15:23

1 Answers1

1

This method does not work consistently across browsers. It is BROKEN on MS Edge at least, and its brokenness is not mentioned by MDN, W3schools or caniuse at time of writing.

Basically, the method will fail when removing boolean attributes such as selected or hidden. The following will fail on Edge:

someDiv.removeAttribute("hidden");

Workaround is to set the attribute to "false" immediately before removing it.

someDiv.setAttribute("hidden", "false"); // "thanks" for the nonsense, MS
someDiv.removeAttribute("hidden");

This is not how boolean attributes are supposed to work, but that's how Edge requires it. Given that Edge is about to be dropped by Microsoft in favour of a Chromium-based alternative, we can expect this bug to remain unfixed, and the workaround to clutter our code for years.

E_net4
  • 27,810
  • 13
  • 101
  • 139
brennanyoung
  • 6,243
  • 3
  • 26
  • 44