Bug 1910887 Comment 6 Edit History

Note: The actual edited comment in the bug view page will always show the original commenter’s name and original timestamp.

So the profiles seem to show frame reconstruction coming from restyles where the restyles are triggered by a call to `DOMTokenList.add` inside of a function called `stickyPageSkin` in the page's JS, which runs whenever I scroll.

Here are (I think) the relevant lines from that function:
```JavaScript
n = document.querySelector('.page-wrapper'),
[...]
r + e.clientHeight + 100 < t.offsetTop + t.clientHeight ?
  (e.classList.add('fixed'),
  n.classList.add('o-visible'))
  :
  (e.classList.remove('fixed'),
  n.classList.remove('o-visible'))
```

The addition/removal of the `o-visible` class here is the key thing in that JS.

Normally this `.page-wrapper` element has:
```CSS
.page-wrapper {
[...]
  overflow-x: hidden;
```
...but `o-visible` gets briefly added and then removed during a scroll operation, and that activates this rule:
```
@media screen and (min-width: 1024px) {
  .page-wrapper.o-visible {
    overflow-x: visible;
  }
```
So the page is toggling `overflow-x` between `visible` and `hidden` on a root element (back and forth), which causes frame reconstruction, which causes iframe content to flash as we rebuild the rendering constructs for the iframe.
So the profiles seem to show frame reconstruction coming from restyles where the restyles are triggered by a call to `DOMTokenList.add` inside of a function called `stickyPageSkin` in the page's JS, which runs whenever I scroll.

Here are (I think) the relevant lines from that function:
```JavaScript
n = document.querySelector('.page-wrapper'),
[...]
r + e.clientHeight + 100 < t.offsetTop + t.clientHeight ?
  (e.classList.add('fixed'),
  n.classList.add('o-visible'))
  :
  (e.classList.remove('fixed'),
  n.classList.remove('o-visible'))
```

The addition/removal of the `o-visible` class here is the key thing in that JS.

Normally this `.page-wrapper` element has:
```CSS
.page-wrapper {
[...]
  overflow-x: hidden;
```
...but `o-visible` gets briefly added and then removed during a scroll operation, and that activates this rule:
```css
@media screen and (min-width: 1024px) {
  .page-wrapper.o-visible {
    overflow-x: visible;
  }
```
So the page is toggling `overflow-x` between `visible` and `hidden` on a root element (back and forth), which causes frame reconstruction, which causes iframe content to flash as we rebuild the rendering constructs for the iframe.

Back to Bug 1910887 Comment 6