Ionic CSS Style Off when Deployed to iOS but fine everywhere else - css

Question

I am not able to get my "Messages" Drawer to display in safari when in mobile, but it is displaying just fine in Chrome. Below are images of what it looks like in the 2 browsers. I assume this is a CSS issue and that the bottom option bar is covering the button in Safari, but I am not sure what needs to change to fix this issue?
I am noticing it has to do with the height and bottom values in the css code, but not sure exactly what to change it to to work in both web browsers?
Safari
Chrome
Here is the code for the Message Drawer
import { createGesture, IonButton, IonCard } from "#ionic/react";
/* Core CSS required for Ionic components to work properly */
import "#ionic/react/css/core.css";
import dynamic from "next/dynamic";
import { useRouter } from "next/router";
import React, { useEffect, useRef, useState } from "react";
import { useGetThreadPageByIdQuery } from "../../../graphql/generated/component";
import { Request_Participant_Status_Value_Enum } from "../../../graphql/generated/graphql";
import ThreadMessages from "../../Messages/List";
import styles from "./styles.module.css";
let MessageWrapper = dynamic(
() => import("../../../components/Threads/MessageBox"),
{ ssr: false }
);
interface refType {
dataset: {
open: string;
};
style: {
transition: string;
transform: string;
};
}
const MessageDrawer = () => {
let drawerRef = useRef();
let router = useRouter();
let { threadID } = router.query;
let messageContainerRef = useRef(null);
let { data, loading } = useGetThreadPageByIdQuery({
variables: { thread_id: threadID },
nextFetchPolicy: "cache-and-network",
});
let scrollToLastMessage = () => {
let timer = setTimeout(() => {
messageContainerRef.current?.scrollIntoView({ beavior: "smooth" });
console.log("This will run after 1 second!");
console.log("message last scroll", data);
}, 500);
return () => clearTimeout(timer);
};
let [initialScrollCompleted, setInitialScrollComplete] =
useState<boolean>(false);
useEffect(() => {
if (initialScrollCompleted) {
return;
}
if (data) {
scrollToLastMessage();
return setInitialScrollComplete(true);
}
}, [loading, data]);
useEffect(() => {
let c: HTMLIonCardElement = drawerRef.current;
c.dataset.open = "false";
let gesture = createGesture({
el: c,
gestureName: "my-swipe",
direction: "y",
onMove: (event) => {
if (event.deltaY < -300) return;
// closing with a downward swipe
if (event.deltaY > 20) {
c.style.transform = "";
c.dataset.open = "false";
return;
}
c.style.transform = `translateY(${event.deltaY}px)`;
},
onEnd: (event) => {
c.style.transition = ".5s ease-out";
if (event.deltaY < -30 && c.dataset.open !== "true") {
c.style.transform = `translateY(${-62}vh) `;
c.dataset.open = "true";
console.log("in on end");
}
},
});
// enable the gesture for the item
gesture.enable(true);
}, []);
let toggleDrawer = () => {
let c: HTMLIonCardElement = drawerRef.current;
if (c) {
if (c.dataset.open === "true") {
c.style.transition = ".5s ease-out";
c.style.transform = "";
c.dataset.open = "false";
} else {
c.style.transition = ".5s ease-in";
c.style.transform = `translateY(${-62}vh) `;
c.dataset.open = "true";
}
}
};
return (
<IonCard className={styles.bottomdrawer} ref={drawerRef}>
<div className={styles.toggleMessage}>
<IonButton className={styles.toggleMessagebtn} onClick={toggleDrawer}>
<ion-icon
class={styles.icon}
slot="start"
src="./assets/dashboard/icons/messages_tab.svg"
/>
<ion-label>Messages</ion-label>
</IonButton>
</div>
<div className={styles.messageContent}>
<ion-list>
{/* <ion-item slot="header" class={styles.item}>
<ion-icon
class={styles.icon}
slot="start"
color="dark"
src="./assets/dashboard/icons/messages_tab.svg"
/>
<ion-label>Messages</ion-label>
</ion-item> */}
<div
slot="content"
className={`${styles.list} ${styles.commentsContainer}`}
>
<ThreadMessages threadID={threadID as string} />
<div
className={`${styles.messageContainerEnd}`}
ref={messageContainerRef}
/>
</div>
</ion-list>
<div className={styles.messageTypeContainer}>
{!data?.thread_by_pk?.request && data?.thread_by_pk?.breakdown ? (
<MessageWrapper
participants={data?.thread_by_pk.participants}
thread_id={threadID as string}
/>
) : null}
{!data?.thread_by_pk
?.request ? null : data?.thread_by_pk?.request?.request_participants?.find(
(request_participant) =>
request_participant.status ===
Request_Participant_Status_Value_Enum.Canceled
) ? null : (
<MessageWrapper
participants={data?.thread_by_pk.participants}
thread_id={threadID as string}
/>
)}
</div>
</div>
</IonCard>
);
};
export default MessageDrawer;
Here is the CSS Code for the Message Drawer.
.bottomdrawer {
position: fixed;
right: 0;
left: 0;
bottom: -71vh;
height: 74vh;
max-height: 100%;
border-radius: 10px 10px 0 0px;
top: auto;
margin: 0;
padding: 0;
-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
overflow: hidden;
width: calc(100% - 30px);
margin: 0 auto;
z-index: 9999;
}
.bottomdrawer[data-open="true"] {
bottom: -79vh;

Answer 1

I suggest placing it in the IonFooter component, this way it can be sticky on the bottom of the page without you having to manually calculate the distance.
However if you want to use the CSS, you can try:
.bottomdrawer {
position: fixed;
right: 0;
left: 0;
bottom: calc(env(safe-area-inset-bottom)-71vh);
...
}
.bottomdrawer[data-open="true"] {
bottom: calc(env(safe-area-inset-bottom)-79vh);