Hacker News Reader

I got an issue recently with how <dialog> interacts with AdSense “vignette” (interstitial) ads.

Vignettes set their `z-index` CSS property to the max (2147483647), but a <dialog> is still higher on the z-plane (with no way to adjust that).

So if you click a link from a <dialog>, and an interstitial gets displayed, it’s under the <dialog>. It looks like nothing happened, that clicking is broken.

Fix in my case was to close() the <dialog> onclick.

View on HN

Use `.show()` instead of `.showModal()` and create your own backdrop.

This is a feature

Yes, but that can be surprising.

That you cannot adjust the z-index is disturbing, especially given that you have to style <dialog> yourself if you wanna make it look any good (as others have reported here).

Also, for the record, alert() is still higher than <dialog> on the plane (see https://i.imgur.com/tzKOEF2.png).

FWIW, it's on a separate layer that's not affected by z-index:

https://developer.mozilla.org/en-US/docs/Glossary/Top_layer

Reply on news.ycombinator.com