(In reply to :Gijs (he/him) from bug 1721658 comment #6)
(In reply to Petruta Horea [:phorea] from comment #5)
Created attachment 9234868 [details]
Screenshot on 2021-08-05 at 11:29:17.png
On high zoom levels, small browser widths and on iframes, the top part of the warning triangle is not visible. Is this intended? Thank you!
Not desired but also not easily avoidable; I asked Bernard to file a follow-up for this on phab:
Hm, this doesn't quite work right for short (not tall) viewports, but there's already so much magic in this (including some JS code) that I don't think it's worth trying to fix it here... Can you file a follow-up to simplify the responsive design of error pages? https://searchfox.org/mozilla-central/rev/4f05a46731c1f7f111ec7a41ce38a34594aa0d37/browser/base/content/certerror/aboutNetError.js#600-602 suggests that
vh doesn't work correctly in iframes, but AFAICT that is no longer true, so we should be able to simplify a bunch of the code here.
Basically, to fix this bug we need to ensure that there is always sufficient padding above the header for the icon, and that the negative margin that we use to compensate for this padding is never so large as to "pull" the icon beyond the top of the viewport. Whether that happens depends on the overall top padding and margin of the ancestors of the h1 element, and some of those values are set from the JS linked above. So though I tried to get something to work with CSS
min, I couldn't get something straightforward, and anyway it wouldn't have worked in iframes without adding more JS. Instead of making things increasingly complicated, I think we should try to simplify the code linked in the quoted comment, such that we stop using JS to make the header fit, relying only on CSS instead, and then we'll stand a chance at fixing this bug, too.
:johann, pinging you based on the matrix conversation to see if you recall why you needed the JS work for iframes rather than relying on the
50vh thingy for that. (originally from bug 1485670)