"<details>" on a distill site works on Chrome but not Firefox

[smithjd]

I have just verified a user complaint about a distill website I'm deploying on Netlify. The site has many tables that are offered as "details" -- optional data tables that might interest some visitors but not others. In Rmarkdown they are created with:

<details>
datatable code, etc.
</details>

Here's what it looks like on Chrome (on a Mac) showing one of two "Details" table selected:

The problem is that using Firefox on a PC, the "Details" widgets are not clickable.

Does anyone have any ideas for solutions, debugging, etc?

[smithjd]

I just checked and I see the same problem with Safari.

[radovan]

This is just a hint, reminds me this SO Q/A (it might be Markdown issue). You may try removing all </details> closing tags... also, if a blank line is used after <details> and before </details> it might help (this would be equivalent to: <details><p>...</p></details>), and perhaps most importantly - the blank lines are needed before/after a HTML section. Hope this would help.

[cderv]

@smithjd can you share the website where this happens ? Can you share some Rmd code that I can run ?
Also does it works correctly in a html_document() ouput format ?

From a quick test using

---
title: "Untitled"
output: 
  html_document: default
  distill::distill_article: default
editor_options:
  markdown:
    canonical: false
---

# TABLE

<details><summary>Table content</summary>

```{r, echo = FALSE}
DT::datatable(mtcars)
```

</details>

it seems with both format Firefox does not update the details tag content on open. On CHROME it is working fine. It does not seem to be specific to distill

Unfortunately, it seems to be a browser issue. It is as if Chrome 'reload' correctly the page as with Firefox, if I click to open and then open the inspector window, it will show correctly.

Anyway, I am not sure what we could do on our side for that
Happy to take any idea.

[smithjd]

Further investigation: It's the DT::datatable that doesn't render. Regular markdown displays correctly. I also have figured out a work-around for the time being. Here's the box that I display above ever datatable, with added language to help Firefox users see the table:

That makes the datatable render. Now that I look at it, perhaps it should say "Firefox and Safari". I will report back on the response I get from users whether the instructions are clear enough and will investigate further what the datatable issue is.

[smithjd]

This problem shows up in Chrome on a tablet, too.

[cderv]

So strange behavior. I don't really know what is causing this, if this is a browser issue or something we could try improve in DT. If you have an idea of what we could do, please open an issue in DT repo.

[smithjd]

I can't figure out what's going on. Here's a minimal site with Distill and datatable out of the box. Here's the code to generate the site.

My guess is that it's a browser issue. But it's kind of funky to need to put a long-winded message like the following on every page:

• With Safari on a Mac, you can only see the data table if you press Option-Command-i – two times!
• With Firefox on a Mac, you can only see the data table if you press Option-Command-i – two times!
• With Firefox on a PC, you can only see the data table if you press Control-Shift-i – two times!