model-viewer: Bug: viewing .usdz in Chrome breaks every time
Description
I’m using glitch.com to view/test my model-viewer scenes and have been for a couple of years. While testing my most recent project I noticed that I’m getting a strange crash every time I am trying to view the AR model in iOS when using Chrome. I assumed it was a user error but then even tested the google animals that are using modelviewer as well as the models straight from modelviewer.dev in chrome. The same scenes work as expected in Safari.
This bug can be reproduced by using Chrome on iOS and attempting to view an AR asset in preview. (Not sure if this matters but I’m using iOS 15.4)
Example File
https://glitch.com/~anasazi-raven-and-pot
Loom Recording
https://www.loom.com/share/9f02e8a3486a4f2aaf8e27a896b49010
Screenshots
The following screenshots were taken from attempting to view models on modelviewer.dev in AR using Chrome iOS:
Loom Recording
https://www.loom.com/share/9f02e8a3486a4f2aaf8e27a896b49010
Version
- model-viewer: v1.10.1
Browser Affected
- Chrome, version: 99.0.4844.59
- Edge
- Firefox
- IE
- Safari
iOS
- Android
- iOS
- Linux
- MacOS
- Windows
AR
- WebXR
- SceneViewer
- QuickLook
About this issue
- Original URL
- State: closed
- Created 2 years ago
- Reactions: 1
- Comments: 20 (4 by maintainers)
Having done some digging, I found this chrome bug report:
https://bugs.chromium.org/p/chromium/issues/detail?id=1302551&q=USDZ&can=2
Where there is a discussion about Content-Disposition header.
In some initial tests, when I set the USDZ file to be served with header
Content-Disposition: attachmentthe following is observed:I think this issue may have been patched somewhere along the way with Chrome 100. I’m testing on iOS 15.5 beta (19F5047e), Chrome 100.0.4896.77.
I confirm this was fixed using this code:
<FilesMatch ".+\.(usdz)$"> Header set Content-Type "model/vnd.usdz+zip" Header set Content-Disposition "attachment" </FilesMatch>in the .htaccess fileNow, I have multiple .htaccess files, one is located on root, one is on public_html folder and another one is in the folder where the .usdz and the .html files sit. I don’t know which one does the job, putting it only on root doesn’t seem to fix it in the beginning for me. Also, after making it to work, I have deleted all the .htaccess files on all the folders including the root, deleted the cache on my phone and it looks like now it works without that file. Or maybe tha cache wasn’t completely deleted… Anyway I will put one .htaccess file on root as @Ocupe suggested and I will post here if everything works smoothy.
Thank you @Ocupe and @charpstar for the code and everyone for your support! Cheers! Adrian
The effect is usually immediate on normal servers. I am not sure why it doesn’t work for you (I tested it with your QR and can confirm it doesn’t work on Chrome 15.4)
Another thing, might be a typo on your post, it is
.htaccesswith two ‘s’ at the endI can confirm @milesgreen findings (thanks for sharing) for:
and that serving USDZ files with an
Content-Disposition: attachmentheader fixed AR QuickLook on iOS Chrome for me.