Limitations of some HTML controls (like <select> dropdown, date picker) in 3D rendering mode

Impacted packages

The limitation described in this article applies to the following 3D WebView packages:

• 3D WebView for Android
• 3D WebView for Android with Gecko Engine
• 3D WebView for iOS
• 3D WebView for visionOS
• 3D WebView for UWP / Hololens

Notably, the limitation doesn't apply to 3D WebView for Windows and macOS.

3D rendering limitation

With the default 3D rendering mode, 3D WebView renders web content from the browser to a texture that is displayed in Unity. This approach works well for most web content, but for the impacted 3D WebView packages listed above, there are some types of HTML5 controls that display a native widget that 3D WebView unable to render:

• <select> element dropdowns (partially supported)
• <input> elements of the following types:
  • color
  • date
  • datetime-local
  • month
  • week
• Hover tooltips declared via a title attribute

The controls listed above cause the browser to show a native widget that 3D WebView is unable to render in 3D rendering mode, so the widget does not appear in Unity (with the exception of <select> elements). Here are some workarounds for this limitation:

1. One option is to use Native 2D Mode on platforms that support it.

2. If the web page is one that you control (i.e. your website), then another option is to use a UI library that renders the widget with HTML and CSS rather than using the native HTML5 control. For example, instead of using a date input element, the page could use a jQuery UI Datepicker.

<select> element dropdowns

<select> elements' dropdowns are also impacted by this limitation, so 3D WebView is unable to render the browser's original native dropdown in 3D rendering mode. However, 3D WebView includes additional logic that automatically detects <select> element dropdowns and renders them in the web page using HTML and CSS so that they appear and function normally. This works well for most <select> elements, but it doesn't support the multiple attribute, and it may potentially render incorrectly on some web pages. If you encounter an issue where a <select> element dropdown isn't working or rendering correctly in 3D rendering mode, then you can use the workarounds described above (using Native 2D Mode or using an alternative like the Bootstrap Dropdown control).