100% height on body tag interpreted differently on desktop & mobile
The code at the bottom of this msg will render a radial (circular) gradient extending from red (middle) to blue (edges).
But which edges?
All modern PC browsers interpret "height:100%" as the height of the viewport only.
Meaning, no matter how long the text is, you will always see ALL of the gradient.
(And because it's fixed, it won't ever scroll out of view with the text.)
So far so good, right? Because that's exactly what I was hoping it would do.
The only issue I've encountered is on mobile (iPhone and iPad) where "100%" height apparently refers to the length of the entire page (ie, text), and not just the viewport. So if the page is twice as long as the viewport, you only see the top half of the gradient. Here, the "fixed" property is useless, since the background stretches to fill the height of the entire page + contents. It'll therefore scroll w/ the text.
GOAL: I would like the mobile behavior to mimic the PC one.
I'm a minimalist, so ideally, I'd like the gradient on the body or html tags - because this gradient will literally be behind every page on the site - if I can avoid creating a new DIV for it (but will relent if that's the only solution to the problem.)
The code :
@charset "utf-8";
/* CSS Document */
html,body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
body {
background-image: radial-gradient(circle, red, blue);
background-attachment: fixed;
overflow-x: hidden;
}
* {
box-sizing: border-box;
margin: 0; padding: 0;
}
Thanks!
PS: Removing all the default margins and paddings from objects is just a default thing I do to make calculations easier. It shouldn't affect this specific issue, but I threw that snippet in, in case it does. (No other styles in the CSS affect html/body.)
AdChoices