background-color does not work properly on iphone

Question

I can't understand why on iphone I don't see the full background but it looks as if it cuts out!

the purple part of the photo is a CANVAS, while the pink part is the background, I want on the iphone to rotate the screen and change the background but when I do the background does not take all the display and that little white piece remains. on anrdoid devices instead it works....

IPHONE SCREEN:

SAMSUNG SCREEN:

this is the code i used on the css:

 @media screen and (min-width: 320px) and (max-width: 667px) and (orientation: portrait) {
   html {
     transform: rotate(-90deg);
     transform-origin: left top;
     width: 100vh;
     height: 100vw;
     background: rgb(248, 184, 158);
     background: radial-gradient(
       circle,
       rgba(248, 184, 158, 1) 27%,
       rgba(210, 64, 49, 1) 70%
     );
     overflow-x: auto;
     position: absolute;
     top: 100%;
     left: 0;
   }
 }

Answer 1

As mentioned in the comment, you have to use vw for width and vh for height. Also check out autoprefixer , it regenerates your css code, so that every browser on every device (almost) will understand it.

Here's the link to the online generator: https://autoprefixer.github.io/

Also be sure to clear the browser cache on your testing device/s, that may cause the load of old code.

Answer 2

why do you set top: 100%; instead of top: 0; ? The top: 100%; push down the background.

Furthermore, I think you need a div container to do the rotation, not the html document.