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