Настройка скейлов для билда на webgl

уважаемые профессионалы unity. Я уже несколько игр подряд сталкиваюсь с проблемой, что при билде на webgl отображение игры ломается. Для меня это новое направление и поэтому я не совсем понимаю почему так происходит. Я пытался гуглить но так ничего и не нашел. В index поставил width height 100% и все равно при сужении и расширении экрана что то не отображается что то и вовсе увеличивается в размерах. вот код index.html

     <canvas id="unity-canvas" style="position: absolute; width: 100%; height: 100%;"></canvas>
 </div>
 <div id="loading-cover" style="display:none;">
     <div id="unity-loading-bar">
         <div id="unity-logo"><img src="logo.png"></div>
         <div id="unity-progress-bar-empty" style="display: none;">
             <div id="unity-progress-bar-full"></div>
         </div>
         <div class="spinner"></div>
     </div>
 </div>

и вот видео для наглядности что не так ссылка на видео

Прошу помогите разобраться.