According to Can I use... Support tables for HTML5, CSS3, etc, Safari IOS has issues with CSS grid, including when dealing with grid properties such as grid-template-columns (which I am using…).
Known issues:
- Safari does not yet support intrinsic and extrinsic sizing with grid properties such as
grid-template-rows
This is how my styling looks like on IOS safari (you need to use an IOS device to see this. devTools will not show you the bad styling - on devTools it all renders beautifully)
I have been trying all sorts of things to make this look proper to no results. Has anyone been able to find a workaround for this IOS safari issue in the past? Pointers more than welcome.
The CSS code:
body {
font-family: 'Helvetica Neue', sans-serif;
font-weight: 400;
height: 100%;
width: 100%;
margin: 0;
padding: 0;
background: #53687e;
background: linear-gradient(120deg, #53687e, hsl(0, 0%, 18%)) fixed;
}
#calculator {
margin: 0 auto;
text-align: center;
padding-top: 100px;
}
.container {
position: relative;
line-height: 1.5;
display: flex;
align-items: center;
justify-content: center;
padding-bottom: 50px;
}
.key-group {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-gap: 10px;
align-items: center;
justify-content: center;
background-color: #000;
padding: 8px;
border-radius: 8px;
box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.7);
}
.key-pad {
cursor: pointer;
background: #33373f;
color: #ffff;
border-radius: 8px;
font-size: 2.5rem;
border-style: none;
padding-right: 50px;
padding-bottom: 50px;
padding-left: 50px;
*/
}
.display {
grid-column: 1 / span 4;
grid-row: 1;
color: #51aaff;
background: none;
height: 5rem;
display: flex;
align-items: flex-end;
justify-content: flex-end;
}
.seven {
grid-column: 1 / span 1;
grid-row: 2;
}
.eight {
grid-column: 2 / span 1;
grid-row: 2;
}
.nine {
grid-column: 3 / span 1;
grid-row: 2;
}
.divide {
grid-column: 4 / span 1;
grid-row: 2;
color: #51aaff;
background-color: #1e242c;
}
.four {
grid-column: 1 / span 1;
grid-row: 3;
}
.five {
grid-column: 2 / span 1;
grid-row: 3;
}
.six {
grid-column: 3 / span 1;
grid-row: 3;
}
.multiply {
grid-column: 4 / span 1;
grid-row: 3;
color: #51aaff;
background-color: #1e242c;
}
.one {
grid-column: 1 / span 1;
grid-row: 4;
}
.two {
grid-column: 2 / span 1;
grid-row: 4;
}
.three {
grid-column: 3 / span 1;
grid-row: 4;
}
.subtract {
grid-column: 4 / span 1;
grid-row: 4;
color: #51aaff;
background-color: #1e242c;
}
.zero {
grid-column: 1 / span 1;
grid-row: 5;
}
.decimal {
grid-column: 2 / span 1;
grid-row: 5;
}
.clear {
grid-column: 3 / span 1;
grid-row: 5;
color: #51aaff;
background-color: #1e242c;
font-size: 2rem;
height: 100%;
width: 100%;
}
.add {
grid-column: 4 / span 1;
grid-row: 5;
color: #51aaff;
background-color: #1e242c;
}
.equals {
grid-column: 1 / span 4;
grid-row: 6;
color: #51aaff;
background-color: #1e242c;
}
footer {
position: fixed;
font-size: small;
color: #fff;
background-color: #262626;
display: flex;
width: 100vw;
height: 4rem;
bottom: 0;
}
.footer-options {
width: 50vw;
display: flex;
justify-content: flex-start;
padding-inline-start: 20px;
align-items: center;
}
footer span {
width: 50vw;
display: flex;
justify-content: flex-end;
padding: 0 20px;
align-items: center;
}
@media (max-width: 900px) {
footer {
flex-wrap: wrap;
height: 5rem;
}
.footer-options {
width: 100vw;
flex-direction: row;
justify-content: center;
padding-inline-start: 0;
align-items: center;
}
footer span {
width: 100vw;
flex-direction: column;
text-align: center;
align-self: flex-start;
}
}