Ghostery's Purple Box is appearing in Lighthouse reports

[chrisblakley]

Description

The purple box is appearing in reports when running Lighthouse in Chrome. This is not a major issue, but it would be nice to not have the purple box influencing Lighthouse reports. I know there are many alternatives such as running Lighthouse elsewhere, using other website testers that also run Lighthouse, and/or disabling the extension from running in incognito mode, but I wanted to note this minor issue here. I also know that the CLS score increased by 0 from Ghostery, but it isn't about the score/rating, just that it is appearing.

I'm also not advocating for the purple box to be removed either. I think if it had some minor different CSS and composite animations that would do the trick to make Lighthouse stop complaining about it.

Expected Behavior

Ghostery's Purple Box would ideally not appear in Lighthouse reports.

Actual Behavior

Note that (I believe) the "unsupported CSS property: height" is indicating that animating the height is non-composite (as opposed to, for example, animating the scaleY via a transform is composite and preferable).

Steps to Reproduce

1. In Chrome DevTools > Lighthouse (tab) run a full report while Ghostery is enabled
2. Likely the purple box will be noted under reports such as Cumulative Layout Shift or Composite Animations
   • Note that the way the animations, or how the purple box appears, is likely causing both issues.

Versions

• Browser: Google Chrome 88.0
• OS: Mac OS 11.2

[christophertino]

Thanks for the submitting. I ran a few Lighthouse reports and I see the same thing. Honestly, that purple box code is pretty old and we've been slowly phasing out that feature. I'm hesitant to start messing with the code because it's relatively stable and its been known to break websites due to CSS collisions. It would be great if there was something like @media print where we could ignore #ghostery-tracker-tally in Lighthouse but I haven't been able to find anything.