Close Button on Modal disappear in real iphone - html

Question

The Close Button still appear when I test responsive in Chrome but it disappear in real iphone.
When click into image, the image gallery will appear but in iphone, it just have previous button and next button, the close button is disappear.
Here're my code:
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";
const ImageGalleryModal = ({
isOpen,
onClose,
currentImage,
listingImages,
}) => {
const [showCurrentImage, setShowCurrentImage] = useState(currentImage);
return (
<Modal
blockScrollOnMount={true}
isOpen={isOpen}
onClose={onClose}
isCentered
size={"full"}
>
<ModalOverlay />
<ModalContent minWidth={"100%"} height={"100vh"} position={"relative"}>
<Image
top={"0"}
width={"full"}
height={"100vh"}
alt={"img_rent"}
src={listingImages[showCurrentImage]?.url}
objectFit={"cover"}
position={"absolute"}
zIndex={100}
/>
<VStack w={"100vw"} h={"100vh"} alignItems={"flex-end"} spacing={0}>
<Box
top={{ base: "16px", lg: "24px" }}
right={{ base: "16px", lg: "24px" }}
borderRadius={"8px"}
position={"absolute"}
zIndex={1000}
>
<IconButton
onClick={onClose}
width={"32px"}
height={"32px"}
borderRadius={"8px"}
bgColor={"rgba(255, 255, 255, 0.3)"}
icon={<CloseIcon />}
aria-label={"Close Image Gallery"}
/>
</Box>
<HStack
position={"absolute"}
zIndex={999}
width={"full"}
height={"full"}
>
<HStack
paddingLeft={{ base: "16px", lg: "24px" }}
height={"full"}
alignItems={"center"}
>
<IconButton
onClick={() =>
setShowCurrentImage(
showCurrentImage > 0
? showCurrentImage - 1
: listingImages?.length - 1
)
}
width={"32px"}
height={"32px"}
borderRadius={"8px"}
bgColor={"rgba(255, 255, 255, 0.3)"}
icon={<ArrowLeftIcon16x8 />}
aria-label={"previous image"}
/>
</HStack>
<Spacer />
<HStack
paddingBottom={{ base: "12px", lg: "16px" }}
height={"full"}
alignItems={"flex-end"}
>
<Text
width={{ base: "56px", lg: "64px" }}
height={{ base: "24px", lg: "34px" }}
fontWeight={500}
fontSize={{ base: "12px", lg: "16px" }}
color={"black.500"}
bgColor={"rgba(255, 255, 255, 0.3)"}
borderRadius={"8px"}
padding={{ base: "4px 18px", lg: "5px 18px" }}
>
{`${listingImages?.length > 0 ? showCurrentImage + 1 : 0}/${
listingImages?.length
}`}
</Text>
</HStack>
<Spacer />
<HStack
paddingRight={{ base: "16px", lg: "24px" }}
height={"full"}
alignItems={"center"}
>
<IconButton
onClick={() =>
setShowCurrentImage(
showCurrentImage < listingImages?.length - 1
? showCurrentImage + 1
: 0
)
}
width={"32px"}
height={"32px"}
borderRadius={"8px"}
bgColor={"rgba(255, 255, 255, 0.3)"}
icon={<ArrowRightIcon16x8 />}
aria-label={"next image"}
/>
</HStack>
</HStack>
</VStack>
</ModalContent>
</Modal>
);
};
export default ImageGalleryModal;
I tried to make zIndex of close button to higher than another buttons but it not working.

Answer 1

The button is visible if you see it closely (See the blue mark on the picture at the top right corner). Just apply some top margin to the close button in a media query. Or if it uses "position: absolute" increase the top value.
(