Created attachment 470583 [details] Screen recording of reproduce When you refresh the page in reader mode and navigate to the page again, the color of the opaque SVG background image becomes distorted. How to reproduce; 1. Visit http://nodejs.org/ 2. Enter reader view; Command + Shift + r 3. Reload the page; Command + r 4. Click a URL bar and redirect the site
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.
<rdar://problem/125693207>
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