background-color does not work properly on iphone-CodePudding

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;
   }
 }

CodePudding user response：

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.

CodePudding user response：

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.