<model-viewer> relies on standardized features of the Web Platform to do a lot of
what it does. Some of these features are very new and don't exist in all
browsers yet. In order to maximize browser compatibility, you should install
polyfills to fill in the
gaps for some of the newest features.
The following emerging standard web platform APIs are needed by this library:
- Custom Elements (CanIUse, Platform Status)
- Shadow DOM (CanIUse, Platform Status)
- Resize Observer (CanIUse, Platform Status)
- Intersection Observer (CanIUse, Platform Status)
- Fullscreen API (CanIUse, Platform Status)
Additionally, the following highly experimental and volatile APIs are needed to enable in-browser AR (currently available in Chrome Canary only):
Some browser support for these features can be enabled with polyfills. Any polyfills that faithfully implement the required platform features should be fine. The following is a selection of recommended polyfill implementations:
- Web Components Polyfill (includes Custom Elements and Shadow DOM)
- Resize Observer Polyfill
- Intersection Observer Polyfill
- Fullscreen Polyfill
Please keep in mind that your mileage may vary depending on the browsers you need to support and the fidelity of the polyfills used.
NOTE: The Fullscreen API is only necessary for the experimental Web XR Device API-based AR mode. Since this is only available behind a flag in Chrome Dev today, it is not necessary to load a Fullscreen API polyfill in production scenarios.
If you are using the polyfills recommended above, you can install them with this NPM command:
npm i --save @webcomponents/webcomponentjs \
resize-observer-polyfill \
fullscreen-polyfill \
intersection-observer
Once you have them installed, it is generally required that you load them before the rest of your application code:
<!doctype>
<html>
<head>
<title>Polyfill Example</title>
<!-- The following libraries and polyfills are recommended to maximize browser support -->
<!-- NOTE: you must adjust the paths as appropriate for your project -->
<!-- Web Components polyfill is required to support Edge and Firefox < 63: -->
<script src="./node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
<!-- Resize Observer polyfill is required for non-Chrome browsers: -->
<script src="./node_modules/resize-observer-polyfill/dist/ResizeObserver.js"></script>
<!-- Intersection Observer polyfill is required for Safari and IE11 -->
<script src="./node_modules/intersection-observer/intersection-observer.js"></script>
<!-- Fullscreen polyfill is required for using experimental AR features in Canary: -->
<script src="./node_modules/fullscreen-polyfill/dist/fullscreen.polyfill.js"></script>
</head>
<body>
<!-- etc -->
</body>
</html>