In older versions of Firefox, details elements in the Seven theme in Drupal 8.x, such as on admin/config/system/site-information , looked like this screenshot -- the summary line (which is a link to open/close the details area) showed up in blue, with a little triangle open/close icon next to it:
With current versions of Firefox, however, it isn't so nice. The summary line is black, and the open/close icon is missing:
This is a big usability problem. It's not obvious without the little arrow or the blue color that this is a link to open/close the box, at least to me.
After some debugging, the problem was traced to the normalize.css file [see original issue summary in first comment for details]. We are currently using a 3.x version of the Normalize library, and it has "summary" elements with display: block;. The current version of the Normalize library uses display: list-item; instead.
So, we need to either:
a) Update to the current version of normalize. This option was proposed in #6 and rejected by the core maintainers in comment #13, and has been moved to its own issue:
📌
Update normalize.css to the most recent version
Fixed
. Also it doesn't work in IE and Edge, see comment #29.
b) Add a small bit of CSS to our normalize library to override display: block for summary elements. That is what is in the patch in #19, but it doesn't work in IE and Edge (they lose the triangles, see tests in comment #27).
c) Add the small bit of CSS but not for IE and Edge, or only for Firefox. There is now a patch that does this.
a) [done] Figure out what to do [Make a small patch to add CSS to override that one piece of the normalize library, but only for Firefox].
b) [done] Make a patch.
c) Test the latest patch on multiple browsers. Tests that have been done for the patch in #51:
Note that the patch only restore the drop-down arrow, not the blue color for the link. Currently, with the patch in #51, Edge and IE have blue color, while Chrome, Firefox, Safari, and Opera don't.
- Apply the latest patch on a local Drupal site. It doesn't really matter which version of Drupal you are using.
- Clear the cache.
- Visit a page like admin/config/system/site-information , using the current version of a browser that has not yet been tested (see Proposed Resolution section, above this in the issue summary).
- See if the summary lines on details elements are formatted correctly (with the drop-arrow) or not.
- Make a screenshot similar to the ones in comments #20 and #22.
- Add a comment telling which browser you tested, upload your screenshot in the Files section, and update the list above ("Tests that have been done").
Details elements on admin pages will again have the drop-down arrow applied to them in current versions of Firefox, without breaking them in other browsers. Right now they don't work in Firefox and it's rather confusing UI.
The blue color is not restored with this patch. Currently, with the patch in #51, Edge and IE have blue color, while Chrome, Firefox, Safari, and Opera don't.
None.
None.
Fixed
8.6 ⚰️
Last updated
Not all content is available!
It's likely this issue predates Contrib.social: some issue and comment data are missing.