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.

CodePudding user response：

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.

(