elad2412/the-new-css-reset

Strange result with browsers on Windows

zero2one opened this issue · 3 comments

zero2one commented

I have a strange result with this reset: the <head> <title> tag and the content of <script> tags within the body are displayed as content in the browser.

This happens only in browsers (tested in Chrome & Edge) on Windows.

I debugged the issue and found out that the error is caused by

*:where(:not(iframe, canvas, img, svg, video):not(svg *, symbol *)) {
  display: revert;
  all: unset;
}
graymatter00 commented

@zero2one The code in reset.css actually reads...

*:where(:not(iframe, canvas, img, svg, video):not(svg *, symbol *)) { all: unset; display: revert; }

The order is important in CSS (CASCADING Style Sheets). Did you alter the order of the all and display, or perhaps apply a PostCSS reordering process, or similar?

elad2412 commented

@zero2one please a CodePen example, I checked, and I can't רeproduce the problem.

The issue is closed until you can demonstrate the problem or someone else.

idesmar commented

I noticed this happening too. The cause is unticking display: revert; in DevTools. I'm unsure at first if this is only happening in dev mode so I tinkered with a live website that heavily implies it uses the new-css-reset: stevejobsarchive.com

Video of Recreating the Issue: Using live website stevejobsarchive.com
The-Steve-Jobs-Archive.webm
GIF Format:
The-Steve-Jobs-Archive (1)

Fix Proposal: Exclude head from Remove all the styles of the "User-Agent-Stylesheet"
Ruleset with head added to excluded elements

*:where(:not(html, head, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) {
  all: unset;
  display: revert;
}

EDIT: Added GIF of Recreating Issue