React-modal 未在 iPhone 上打開

Question

因此，我正在構建我的投資組合網站，當我在手機上對其進行測試時，模式不會在我的 Iphone 上或 safari 或 chrome 上彈出。

請注意我使用的是反應模式；

在 android 和鉻檢查它工作正常。

<div className="projects-container">
    {projects.map((item, index) => (
      <React.Fragment key={uuidv4()}>
        <div className="project-image" onClick={() => setSelectedModal(index)} key={uuidv4()}>
        <img src={item.image} alt="project preview"></img>
      </div>
        <Modal
          isOpen={index === selectedModal}
          onRequestClose={() => setSelectedModal(-1)}
          className="project-modal"
          overlayClassName="project-modal-overlay"
        >
          <FaTimes
            onClick={() => setSelectedModal(-1)}
            className="close-icon" />
          <div className="modal-image">
            <img src={item.image} alt={item.title}></img>
          </div>
          <div className="modal-content">
            <h1>{item.title}</h1>
            <div className="modal-technologies">
              {item.tags.map(it => <span key={uuidv4()}>{it}</span>)}
            </div>
            <h3>About</h3>
            <p>{item.description}</p>
            <div className="btn-link-wrapper">
              <a
                href={item.demoUrl}
                target="_blank"
                rel="noopener noreferrer"
                className="project-link"
              >
                <FaEye className="eye-icon" />
                <span>Demo</span>
              </a>
              <a
                href={item.codeUrl}
                target="_blank"
                rel="noopener noreferrer"
                className="project-link"
              >
                <FaCode className="code-icon" />
                <span>Code</span>
              </a>
            </div>
          </div>
        </Modal></React.Fragment>
    ))}
    </div>

我的網站倉庫：https://github.com/biancahpp/Portfolio部署：biancaprocopio.ca

Answer 1

我去調查的第一件事是 CSS 因為它是一個模態並且需要一些定位，React 與它無關。

...我最初的猜測是正確的，問題與 CSS 定位有關，您應該在 position 之后定義top和left屬性position: fixed; 在_modal.scss文件中的.project-modal-overlay class 中。

.project-modal-overlay{
  position: fixed;
  top: 0;
  left: 0;
  inset: 0px;
  background-color: $overlay-background;

  display: flex;
  justify-content: center;
}

這種類型的定位可能是最令人困惑和誤用的。 它的真正含義是“相對於自身”。 如果設置 position: relative; 在一個元素上但沒有其他定位屬性（上、左、下或右），它根本不會影響它的定位，如果你把它留為 position: static; 但是如果你給它一些其他的定位屬性，比如說，top: 10px;，它會將它的 position 從它通常的位置向下移動 10 個像素。 我相信您可以想象，基於常規 position 移動元素的能力非常有用。 我發現自己多次使用它來排列表單元素，這些元素往往不想按照我想要的方式排列。

參考： https://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/#relative