[Webkit-unassigned] [Bug 234700] [GTK] CSS property background-blend-mode: luminosity generates major slowdown on GNOME Web

[bugzilla-daemon at webkit.org]

https://bugs.webkit.org/show_bug.cgi?id=234700

--- Comment #2 from Pedro Paulo <pedropaulosuzuki1 at gmail.com> ---
(In reply to Peter from comment #1)
> I'm interested in your findings. The performance issues of Epiphany on some
> website hurt me for a long time - and I can confirm that hardware
> acceleration helps a little but it is not a fix:
> 
> Sadly the line JS code doesn't work for me. Is it possibly that the cssRules
> are currently '0'?

They changed the <style data-styled="active"> to be separated into two elements:

<style data-styled="active">
<style data-styled="active" data-styled-version="5.3.3"></style>

Not only that, but the index 92 is now changed to the index 143. (I show a better method to finding the correct index in the end of this message).

Therefore, the current JS solution should now look like this:

```js
Array.from(document.querySelector('style[data-styled][data-styled-version]').sheet.cssRules)[143].style.backgroundBlendMode = ''; // New fix to the slowdown.
```

Some more findings:

> The element that causes all the trouble is the div with the class fmFeyz
```js
    const troublemaker = document.querySelector('.fmFeyz');
```

> We can keep the background-blend-mode if we do not set the background-attachment to fixed. This might imply that the slowdown might be related to an image that shares those two properties together.
```css
.some-class {
    background-image: url("./some-image.png");
    background-blend-mode: luminosity;
    background-attachment: fixed;
}
```

> We can target the CSS class directly with the JS code if we select the correct CSS rule by the selectorText property. That is a better solution than pointing directly to the cssRule index, which can change often.
```js
Array.from(document.querySelector('style[data-styled][data-styled-version]').sheet.cssRules).find(css_rule => css_rule.selectorText === '.fmFeyz').style.backgroundBlendMode = ''; // Better solution
```

-- 
You are receiving this mail because:
You are the assignee for the bug.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.webkit.org/pipermail/webkit-unassigned/attachments/20220221/9dd31717/attachment.htm>