React-modal 未在 iPhone 上打开

Question

So I'm building my portfolio website and when I was testing it on my phone the modal wouldn't pop up on my Iphone nor on safari or chrome.

Please note I'm using react-modal;

On android and chrome inspect it works fine.

<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>

My repo for the website: https://github.com/biancahpp/Portfolio Deployed: biancaprocopio.ca

Answer 1

First thing I went to investigate is CSS since it's a modal and requires some positioning, React has nothing to do with it.

... and my initial guess was right, The issue is connected with CSS positioning, you should define top and left attributes after position: fixed; in .project-modal-overlay class in _modal.scss file.

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

  display: flex;
  justify-content: center;
}

This type of positioning is probably the most confusing and misused. What it really means is “relative to itself”. If you set position: relative; on an element but no other positioning attributes (top, left, bottom or right), it will have no effect on it's positioning at all, it will be exactly as it would be if you left it as position: static; But if you do give it some other positioning attribute, say, top: 10px;, it will shift its position 10 pixels down from where it would normally be. I'm sure you can imagine, the ability to shift an element around based on its regular position is pretty useful. I find myself using this to line up form elements many times that have a tendency to not want to line up how I want them to.

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