Bug 271615 – SVG opacity failure after reader view

• Component: DOM
• Status: NEW

[Caner Akdas]

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

[Alexey Proskuryakov]

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.

[Radar WebKit Bug Importer]

<rdar://problem/125693207>

[Karl Dubost]

Created attachment 470691 [details]
steps in STP 191

[Karl Dubost]

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;
    }
}

[Karl Dubost]

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

[Karl Dubost]

It's not the CSS above, because I comment the CSS, the same issue is happening.

[Karl Dubost]

I will move the bug to Safari.

[Karl Dubost]

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

[Karl Dubost]

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