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?
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.
/*-------------- bottom drawer ------------*/
.viewthresContent {
width: 100%;
height: 100vh;
overflow: hidden;
position: absolute;
top: 45px;
}
.cardWrapper {
background-color: #fff;
}
.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;
}
.toggleMessagebtn {
width: 100%;
border-radius: 20px;
height: 40px;
margin: 0;
}
.messageContent {
background-color: #fff;
}
.messageContent > ion-list {
padding-top: 0 !important;
padding-bottom: 0;
}
.messageTypeContainer {
padding: 15px 20px 5px 20px;
padding-bottom: 15px !important;
}
.messageTypeContainer ion-card {
margin: 0 2px;
height: 55px;
}
.messageTypeContainer ion-list {
padding-bottom: 10px;
}
@media (prefers-color-scheme: dark) {
.item {
--background: var(--ion-color-light-tint);
}
.icon {
color: #fff;
}
.list {
background: var(--ion-color-light-tint);
}
.fixedbutton,
.messageContent,
.bottomdrawer {
background-color: var(--ion-color-light-tint) !important;
}
.bold {
font-weight: 700;
}
.note {
float: left;
align-items: center;
display: flex;
font-weight: 400;
font-size: 12px;
}
}
.videoName {
max-width: 110px;
overflow: hidden;
text-overflow: ellipsis;
font-size: 24px;
}
.status {
float: right;
align-items: center;
display: flex;
font-weight: 400;
font-size: 12px;
}
.date {
float: right;
align-items: center;
display: flex;
font-weight: 400;
font-size: 12px;
}
.videoitem {
display: flex;
}
.video {
max-height: 500px;
max-width: 700px;
}
.videoContainer {
width: 100%;
max-width: 60%;
padding: 0 10px;
margin: 0 auto;
}
@media (max-width: 768px) {
.bottomdrawer[data-open="true"] {
bottom: -75vh;
}
}
@media (max-width: 767px) {
/* .wrapper ion-content::part(scroll) {
overflow: auto;
} */
.wrapper ion-content::part(scroll) {
padding-bottom: 76px;
}
.bottomdrawer[data-open="true"] {
bottom: -70vh;
}
.bottomdrawer {
bottom: -69vh;
}
}
@media (max-width: 767px) {
.fixedbutton {
position: static;
top: 40px;
z-index: 5;
left: 0;
right: 0;
background-color: #fff;
}
.fixedbutton + ion-item {
padding-top: 40px;
}
}
@media (max-width: 767px) and (max-height: 600px) {
.bottomdrawer {
bottom: -63vh;
}
.messageTypeContainer {
padding: 5px 20px 5px 20px;
}
.messageTypeContainer ion-button {
height: 34px;
font-size: 14px;
}
.commentsContainer {
max-height: 39vh;
min-height: 39vh;
}
}
@media (max-width: 700px) and (min-height: 700px) and (max-height: 800px) {
.commentsContainer {
max-height: 45vh;
min-height: 45vh;
}
}
@media (max-width: 700px) and (min-height: 800px) {
.commentsContainer {
max-height: 46vh;
min-height: 46vh;
}
}
@media (max-height: 870px) {
.videoContainer {
max-width: 55%;
}
}
@media (max-height: 820px) {
.videoContainer {
max-width: 60%;
}
}
@media (max-height: 800px) {
.videoContainer {
max-width: 52%;
}
}
@media (max-height: 740px) {
.videoContainer {
max-width: 40%;
}
}
@media (max-width: 1300px) and (max-height: 740px) {
.videoContainer {
max-width: 50%;
}
}
@media (max-height: 620px) {
.videoContainer {
max-width: 28%;
}
}
@media (min-width: 540px) and (max-height: 720px) {
.bottomdrawer[data-open="true"] {
bottom: -69vh;
}
.bottomdrawer {
bottom: -69vh;
}
}
@media (min-width: 375px) and (max-height: 667px) {
.bottomdrawer[data-open="true"] {
bottom: -65vh;
}
.bottomdrawer {
bottom: -68vh;
}
}
@media (min-width: 768px) and (max-height: 1024px) {
.bottomdrawer[data-open="true"] {
bottom: -70vh;
}
.bottomdrawer {
bottom: -69vh;
}
}
@media (min-width: 1200px) and (min-height: 1000px) {
.bottomdrawer[data-open="true"] {
bottom: -74vh;
}
.bottomdrawer {
bottom: -70vh;
}
}
/* @media (min-width: 768px) and (max-height: 1024px) {
.bottomdrawer[data-open="true"] {
bottom: -66.3vh;
}
.bottomdrawer {
bottom: -69.3vh;
}
} */
@media (min-width: 280px) and (max-height: 653px) {
.bottomdrawer[data-open="true"] {
bottom: -64vh;
}
.bottomdrawer {
bottom: -68vh;
}
}
@media (min-width: 360px) and (max-height: 640px) {
.bottomdrawer[data-open="true"] {
bottom: -64vh;
}
.bottomdrawer {
bottom: -68vh;
}
}
@media (max-width: 1100px) and (max-height: 800px) {
.videoContainer {
max-width: 73%;
}
}
@media (max-width: 1000px) and (max-height: 1100px) {
.videoContainer {
max-width: 98%;
}
}
@media (min-width: 480px) and (max-height: 480px) {
.videoContainer {
padding-bottom: 50px;
}
}
@media (min-width: 320px) and (max-height: 780px) {
.bottomdrawer[data-open="true"] {
bottom: -67vh;
}
}
@media (min-width: 360px) and (max-height: 440px) {
.bottomdrawer {
bottom: -64vh;
}
.bottomdrawer[data-open="true"] {
bottom: -62vh;
}
.messageTypeContainer {
padding: 5px 20px 5px 20px;
}
.commentsContainer {
max-height: 35vh;
min-height: 35vh;
}
}
@media (min-width: 360px) and (max-height: 440px) {
.bottomdrawer[data-open="true"] {
bottom: -62vh;
height: 80vh;
}
}
@media (min-width: 768px) and (min-height: 1020px) {
.bottomdrawer[data-open="true"] {
bottom: -75vh;
}
}
@media (min-height: 1100px) {
.bottomdrawer {
bottom: -70vh;
}
.bottomdrawer[data-open="true"] {
bottom: -76vh;
}
}
@media (min-height: 1200px) {
.bottomdrawer {
bottom: -71vh;
}
.bottomdrawer[data-open="true"] {
bottom: -78vh;
}
}
