Safari’s HTML model Element: What Do Other Browsers Show?
A shopper rotates the product in Safari, while another browser shows only its photo. What if the customer needs to see the back before buying?
- Safari 27 brings native HTML model rendering to iOS, iPadOS, and macOS.
- A nested image supplies a product preview in browsers that do not support the element.
- Interactive 3D elsewhere still needs a suitable viewer, and failed asset loads need their own UI.
Unsupported browsers can show the product photo
Adding <model> does not install a 3D renderer in every visitor’s browser. An img inside the element provides fallback content for browsers without native support, as shown in the proposal’s examples.
Safari 27 extends the element from visionOS to iOS, iPadOS, and macOS. In supported environments, the browser renders the asset without a separate JavaScript viewer library. A minimal product example is:
<model src="/products/chair.usdz"
stagemode="orbit"
style="display: block; width: 100%; height: 320px;">
<img src="/products/chair.jpg"
alt="A wooden chair with a gray upholstered seat"
style="max-width: 100%; height: auto;">
</model>Replace the example paths with your product assets. Orbit mode enables built-in interaction where supported; the fallback photo remains a static image. Multiple source elements can offer format alternatives, but listing a format does not make an unsupported browser able to decode it.
Native support does not guarantee a successful load
A browser can implement the element and still fail to load a particular product. A wrong URL or an asset it cannot interpret is a different problem from an unsupported HTML feature.
The element’s ready promise resolves after the resource has been loaded and processed. Fetching or interpretation failures reject it. Pair the success path that removes your loading indicator with an explicit failure path that presents a product photo.
For example, a ready.catch(...) handler can hide the model region and reveal a separate image region. Do not treat the presence of a nested img as a complete error strategy. Keep essential product text and purchasing information available independently of the 3D view.
Keep a JavaScript viewer when rotation is essential elsewhere
<model> is a native element. <model-viewer> is a web component installed through JavaScript, with support for glTF and GLB assets. They address overlapping needs, but replacing one tag with the other does not preserve the same browser coverage.
| Product requirement | Suitable approach |
|---|---|
| Native 3D in supported Safari; a photo is sufficient elsewhere. | Use model with an image fallback. |
| Visitors across the target browsers need to rotate the product. | Keep a JavaScript viewer such as model-viewer, or provide it as an alternative path. |
| Visitors must place the product in their surroundings. | Check AR device and browser requirements separately from inline 3D. |
The model-viewer project lists the last two major versions of evergreen desktop and mobile browsers, plus the last two Safari versions on macOS and iOS, as its support target. That policy describes the component, not native model support. Its ordinary 3D display and its AR modes also have different requirements.
Test the product in four distinct states
Start with a successful native load in supported Safari and verify interaction. Then open the page in a browser without model support and check that the image and alternative text remain available.
Next, deliberately break the asset URL in a test page while using a supporting browser. Confirm that the loading state ends in the intended error presentation. Finally, if interactive 3D is required elsewhere, test the separate viewer path with the same product.
Native rendering can be an additional experience when a photograph already serves the page’s purpose. If inspecting the product in 3D is essential for every target audience, an image fallback alone does not meet that requirement.