Enabling Feature (Experimental) Flags on Safari iOS

2 min read  •  2 Jul 2023
Views:

Have you ever curiously tried some latest features or web APIs on your iOS device, and turns out its not working because of browser support, as the feature might be experimental. You can enable such features for your Safari (iOS), here's how you can do that-

  • Open Settings > Safari > Advanced
  • Select Experimental Features or Feature Flags
ff-settings

Let's try out with an example to see how it works, as I write, the CSS property content-visibility is disabled by default and available inside feature flags to be used. I will be using following markup to test it with and without the feature flag enabled.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .content-wrapper {
        content-visibility: hidden;
      }
    </style>
  </head>
  <body>
    <div>
      <h1>Test App</h1>
      <div class="content-wrapper">
        <img src="https://picsum.photos/200" alt="" />
      </div>
    </div>
  </body>
</html>

Result:

We can see, the content was not hidden by default, since css property content-visibility was not enabled in feature flag. But after enabling it, the content-wrapper div got hidden.

safari-ios-ff-demo