Summary: | SVG opacity failure after reader view | ||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|
Product: | WebKit | Reporter: | Caner Akdas <canerakdas> | ||||||||
Component: | DOM | Assignee: | Nobody <webkit-unassigned> | ||||||||
Status: | NEW --- | ||||||||||
Severity: | Normal | CC: | ap, karlcow, rmondello, sabouhallawa, simon.fraser, webkit-bug-importer | ||||||||
Priority: | P2 | Keywords: | InRadar, NeedsReduction | ||||||||
Version: | Safari 17 | ||||||||||
Hardware: | Mac (Apple Silicon) | ||||||||||
OS: | macOS 14 | ||||||||||
Attachments: |
|
Description
Caner Akdas
2024-03-24 17:12:14 PDT
Arguably the first incorrect behavior is at step 3 - when reloading in Reader mode, the result is blank. But not sure if those issues are related. Created attachment 470691 [details]
steps in STP 191
The background is made of <div class="glowingBackdrop"></div> div.glowingBackdrop { position: absolute; left: 0; top: 0; z-index: -10; width: 100%; height: 100%; background-image: url(/static/images/patterns/hexagon-grid.svg); background-position: 50%; background-repeat: no-repeat; opacity: .5; } div.glowingBackdrop::after { position: absolute; inset: 0; margin: auto; aspect-ratio: 1/1; width: 300px; border-radius: 9999px; --tw-bg-opacity: 1; background-color: rgb(153 204 125/var(--tw-bg-opacity)); --tw-blur: blur(120px); filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); --tw-content: ""; content: var(--tw-content); } @media (min-width:768px) { div.glowingBackdrop { opacity: 1; } } Interestingly it seems to "kill the viewport". If there is another site in the step to reproduce. 0. Go to https://en.wikipedia.org/wiki/Tunnel 1. Visit http://nodejs.org/ 2. Enter reader view; Command + Shift + r 3. Reload the page; Command + r Then 4. Hit the back arrow navigation icon We do not get back the wikipedia page https://en.wikipedia.org/wiki/Tunnel It's not the CSS above, because I comment the CSS, the same issue is happening. I will move the bug to Safari. Created attachment 470711 [details]
before after reload
Yes Caner reported a different issue in fact.
We can see that in this screenshot.
Step 1
and after reloading the page.
While the first screenshot shows a nice faded blur
The second screenshot shows a raw rendering.
There is another bug (the one found by Alexey) for Reader but this will need to be open on Safari
For the Reader going blank I opened rdar://125746919 Let's focus here on the SVG becoming weird. https://bugs.webkit.org/attachment.cgi?id=470711 |