Lighthouse Message Obsolete API

[jamesdelaney888]

I get a warning on Lighthouse when checking websites deployed with Cloudflare Pages. It tells me that it is using obsolete API.

Here is the font of the issue: [:1:-1]

¿How could I solve this?

[cherryjimbo]

Can you provide any more information? A URL where you’re seeing this perhaps? Cloudflare Pages itself doesn’t inject or run any JS on your site, so something else you have enabled in Cloudflare or part of your build must be the script doing this.

It’s not uncommon for scripts that are intended to run across many old browsers and systems to use deprecated APIs, so that they can still function on these outdated browsers - you’ll see this with lots of libraries. This almost certainly is not going to cause any issues on your site.

[jamesdelaney888]

Sure. I’ve tried to provide the URL but Cloudflare does not allow it.
Let’s try it like this:
freetourmilan(dot)net
dot = .

You can try on lighthouse. It is something weird because I have a lot of websites on Cloudflare, and I’ve never seen that before. And I saw it even before making any configuration with the domain that they provide you too.

Another issue was that somehow, Cloudflare put all my HTML inside the robots.txt file. Do you think that could be related?

[cherryjimbo]

The HTML being served from pages you don’t expect is caused by a missing 404.html file. Without this, Pages serves your index.html on every route. For example: https://freetourmilan.net/some-not-real-page

Serving Pages · Cloudflare Pages docs

I’d recommend you add a 404.html to your output to serve real 404s.

---

As for the deprecated APIs, this is caused by some of your CSS. Specifically, you’re seeing this deprecation: OverflowVisibleOnReplacedElement

Looking at the chromium source, you can see:

  /**
   * @description Warning displayed to developers that use overflow:visible
   * for replaced elements. This declaration was earlier ignored but will now
   * change the element's painting based on whether the overflow value allows
   * the element to paint outside its bounds.
   */
  overflowVisibleOnReplacedElement:
      'Specifying `overflow: visible` on img, video and canvas tags may cause them to produce visual content outside of the element bounds. See https://github.com/WICG/shared-element-transitions/blob/main/debugging_overflow_on_images.md.',

So I would recommend looking at your site’s source, any libraries you use, etc. that may be causing this. I would not expect anything to break or actually be impacted on your site (especially if you’re not using the shared element transition API which is extremely new), but if you really want to fix it, that’s what to look for in your code.