PingOne DaVinci

Using Legacy Browser and WebView Compatible Rendering Mode

You can configure a flow to support rendering in a legacy browser directly or within a WebView compatible with legacy browsers. This setting is intended for legacy systems that rely on Trident 7+ or EdgeHTML 18+ WebView rendering engines in situations where upgrading to a Chromium browser is not yet possible.

Steps

  1. In the DaVinci admin console, click the Flows tab.

  2. Find the flow and click ... > Edit.

  3. Click More options ( ) > Flow Settings to show the flow settings.

  4. On the General tab, select Legacy Browser and WebView Compatible Rendering Mode.

    Some elements and features are limited or unavailable when this setting is enabled:

    • PingOne Forms can’t be used.

    • You can’t use Google reCAPTCHA.

    • SVG animations can only be used by including them in a Custom HTML Template.

    • FIDO2 functionality might be limited.

    • PingOne Protect uses version 5.5.2.

    • Images (such as logos) can’t be added directly in HTML nodes. Instead, you must add them using the Custom CSS Rules option.

    • JavaScript styling might render differently. Take the following steps if your flow is a Ping authorized productized flow that uses JavaScript:

    • CSS styling might render differently. Take the following steps if your flow is a Ping authorized productized flow that uses CSS:

      • Test the flow in a legacy browser or WebView environment.

      • If you are using the PingOne DaVinci default CSS, ensure that the latest CSS version is configured in the Custom CSS Files section, include the https://assets.pingone.com/ux/astro-nano/0.1.0-alpha.18/icons.css and https://assets.pingone.com/ux/end-user-nano/0.1.0-alpha.21/end-user-nano.css files, and include the following custom CSS rule:

        .companyLogo

{ /* Ping Logo */ background-image: url("https://uploads.pingone.com/environments/6a3d153e-e285-4ac6-8388-5ac0b9f9aa53/images/bcac3292-cfca-49d3-8f58-2bd288582cf3_33abd619-ad95-456f-8bf8-f0af2cff760f_original.png"); width: 200px; height: auto; background-size: cover; background-repeat: no-repeat; background-position: center; }

.footerLogo { /* Ping Logo */ background-image: url("https://authenticator.pingone.com/pingid/assets/images/ping-logo.sm.2x.png"); width: 105px !important; height: auto; background-size: cover; background-repeat: no-repeat; background-position: center; }``

  5. Click Save.