Unity3D WebGL template has white stripes on the sides in landscape orientation iOS Safari

Unity Engine
,
1

Hello everyone Please help me, I have a WebGL template for the game and it perfectly stretches the game space to the entire size of the browser on desktop and android browsers, however, on iOS devices with horizontal orientation, white stripes appear on the sides that cannot be removed in any way, what can be done in this situation?

I used a css template

* {
    border: 0;
    padding: 0;
    margin: 0;
    font-family: 'Noto Sans', sans-serif;
    font-size: 1.1em;
}

html,
body {
    width: 100%;
    height: 100%;
   
    padding: constant(safe-area-inset-top) constant(safe-area-inset-right) constant(safe-area-inset-bottom) constant(safe-area-inset-left);
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}


#unity-container {
    position: absolute;
    width: 100%;
    height: 100%;
    min-width: 100%;
    min-height: 100%;
}

#unity-container.unity-desktop {
    width: 100%;
    height: 100%
}

#unity-container.unity-mobile {
    width: 100%;
    height: 100%
}

#unity-canvas {
    width: 100%;
    height: 100%;
    min-width: 100%;
    min-height: 100%;
   
    { background:{ #ffffff;} }
}

.unity-desktop #unity-canvas {
    width: 100%;
    height: 100%
}

.unity-mobile #unity-canvas {
    width: 100%;
    height: 100%
}

#unity-canvas+* {
    z-index: 2;
}
2

Hi, did you find a solution for this already? having the same issue

3

Hi! Yes, my friend search WebKit and use this code in Head index.html this problem is fixed.

https://webkit.org/blog/7929/designing-websites-for-iphone-x/

4

Hi @ProGameDevUser

I have the same problem. I use the code below and it doesn’t work

padding-left: env(safe-area-inset-left);
padding-right: env(safe-area-inset-right);

Do you use this code in your css file?