Use of `content-visibility` CSS rules can lead to false colour contrast issues being reported

[philwolstenholme]

Expectation: All content on the page should have its colour contrast evaluated correctly

Actual: Content that is not yet rendered (because of content-visibility rules in CSS) can result in false colour contrast issues being reported

Motivation: I'd like to avoid the false positives and get back to my 100 score on Lighthouse :)

---

I'm not sure if a bug exists for this already (I searched for content-visibility but couldn't find anything), but there has been some discussion of it last year on Twitter, including a comment from @straker (apologies if this issue is already being tracked elsewhere):

• https://twitter.com/slightlylate/status/1338281294694735872
• https://twitter.com/sundress/status/1338294674516107265
• https://twitter.com/StevenKLambert/status/1338632222178332676

You can see an example on https://infrequently.org as mentioned by @slightlylate on Twitter - colour contrast issues are reported with some of the <code> elements, but these have a sufficient ratio.

Chrome 88.0.4324.96
Lighthouse 6.4.0

[straker]

Thanks for the issue. This one's going to be a bit difficult to report on correctly so we might just have to ignore elements with content-visibility all together as the content technically isn't visible and since the bounding rect isn't correct when it's hidden.

[ediblecode]

For anyone reading this, I had the same issue which was caused by having incorrect contain-intrinsic-height. Changing that to an estimated value that was closer to the final, real value fixed the issue.