iPhone not honoring CSS Grid Rows - css

Question

.remote-local-video {
display: grid;
grid-gap: 0.25rem;
grid-template-columns: 50% 50%;
grid-template-rows: 80vh;
grid-template-areas: "remoteVideo localVideo";
.ch-video {
object-fit: contain;
}
#media (max-width: 769px) {
grid-template-columns: 100%;
grid-template-rows: 40vh 40vh;
grid-template-areas: "remoteVideo" "localVideo";
}
}
We have this CSS. It seems to be working fine in Android Chrome, Chrome/Firefox dev tools in Macbook Pro. In iPhone 12 Max Pro, iPhone 11 Pro and IPhone XR - either remoteVideo is displayed or localVideo is displayed. Both are not displayed together. I tried this both in Chrome and Safari browser.

Answer 1

I have found that Safari on iPhone is more particular with having perfect code than any other platform. Could it be that the closing bracket for your class .remote-local-video is at the bottom of this CSS instead of above the .ch-video class? Also (not sure if you are just using different syntax than I am used to - but I usually separate the media query and re-state the class name within). I threw this in my testing environment real quick and found it working in Safari on iPhone 6:
.remote-local-video {
display: grid;
grid-gap: 0.25rem;
grid-template-columns: 50% 50%;
grid-template-rows: 80vh;
grid-template-areas: "remoteVideo localVideo";
}
.ch-video {
object-fit: contain;
}
#media only screen and (max-width: 769px) {
.remote-local-video {
grid-template-columns: 100%;
grid-template-rows: 40vh 40vh;
grid-template-areas: "remoteVideo" "localVideo";
}
}
Note: I also used the following HTML (please pardon my inline border for visibility):
<div class="remote-local-video">
<div style="border: 1px solid black">1</div>
<div style="border: 1px solid black">2</div>
</div>
(I once found a missing closing bracket in a JavaScript selector that was working everywhere else in a web application, but stopped working/showed up when the dept. switched to using iPhones!)

Answer 2

.remote-local-video {
display: grid;
grid-gap: 0.25rem;
grid-template-columns: 50% 50%;
grid-template-rows: calc(100vh - 80px);
grid-template-areas: "remoteVideo localVideo";
.ch-video {
object-fit: contain;
}
#media only screen and (max-width: 950px) and (orientation: portrait) {
div#meetingLocalVideo {
height: calc(50vh - 40px);
}
div#meetingRemoteVideos {
height: calc(50vh - 40px);
}
grid-template-columns: 100%;
grid-template-rows: calc(50vh - 40px) calc(50vh - 40px);
grid-template-areas: "remoteVideo" "localVideo";
}
#media only screen and (max-width: 950px) and (orientation: landscape) {
div#meetingLocalVideo {
height: calc(100vh - 80px);
}
div#meetingRemoteVideos {
height: calc(100vh - 80px);
}
grid-template-rows: calc(100vh - 80px);
}
}
IOS expects us to set explicit height of divs. Above CSS is working fine.