The issue I am facing is that the Close Button appears when testing responsiveness in Chrome, but disappears on a real iPhone.
When clicking on an image, the image gallery should appear. However, on an iPhone, only the previous and next buttons are visible while the close button disappears.
Below is the code snippet:
import React, { useState } from "react";
import {
Box,
HStack,
IconButton,
Image,
Modal,
ModalContent,
ModalOverlay,
Spacer,
Text,
VStack,
} from "@chakra-ui/react";
import ArrowLeftIcon16x8 from "../../icons/ArrowLeftIcon16x8";
import ArrowRightIcon16x8 from "../../icons/ArrowRightIcon16x8";
import { CloseIcon } from "@chakra-ui/icons";
// Component definition omitted for brevity
export default ImageGalleryModal;
I have tried adjusting the zIndex of the close button to be higher than that of the other buttons, but it did not resolve the issue.