background-color does not work properly on iphone

useru5AZ 0
Viewed 46

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:

enter image description here

SAMSUNG SCREEN:

enter image description here

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;
   }
 }
background ios javascript css android
2 Answers

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.

Artur Niko0

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.

efraim0
Related