Make the border invisible

[sercandemirtas]

Hello all!

How can I make model viewer's border invisible when we are rotating the model. It is blue on Mac and black on Windows. I want to make it invisible. I checked modelviewer.dev and on astronout example there is no border.

Do I need to edit my css codes or is there option on model viewer ? so any idea&suggest would be great.

Thanks..

Live Demo

https://unruffled-einstein-e67ebb.netlify.app/urun.html

Browser Affected

• [ X] Chrome
• [ X] Edge
• [ X] Firefox
• [X ] IE
• [ X] Safari

OS

• Android
• iOS
• Linux
• [X ] MacOS
• [ X] Windows

[elalish]

Have you added the focus-visible polyfill? <script src="../node_modules/focus-visible/dist/focus-visible.js" defer></script>

[sercandemirtas]

<script src="https://unpkg.com/@webcomponents/[email protected]/webcomponents-loader.js"></script>
<script src="https://unpkg.com/[email protected]/intersection-observer.js"></script>
<script src="https://unpkg.com/[email protected]/dist/ResizeObserver.js"></script>
<script src="node_modules/focus-visible/dist/focus-visible.js" defer></script>

<script type="module"
src="https://unpkg.com/@google/[email protected]/dist/model-viewer.min.js">
</script>

<script nomodule
src="https://unpkg.com/@google/[email protected]/dist/model-viewer-legacy.js">
</script>

Hey @elalish I have added your code but nothing changed. (you can check my demo page I shared link) What am I missing ?

[elalish]

Sorry, I pasted you a relative URL, try this instead: <script src="https://unpkg.com/[email protected]/dist/focus-visible.js" defer></script>

[sercandemirtas]

@elalish It worked! Thank you...