某些项目在 iPad Pro 上不显示

Question

iPad Air 上不显示某些项目。

如果您查看此页面：https://xposed-837fc.web.app/magazin-online

在“专业。即兴。完美。”下，你会发现一些带有他们形象的项目。但在 iPad Air 上不显示。

我在 Chrome 上测试了它的所有尺寸，它们都出现了，即使是 iPad Pro 模拟器，它与 Air 的规格几乎相同，并且可以正常工作。 但在 iPad Air 上却没有。

有人知道为什么吗？

我找不到任何合乎逻辑的解释？？？？

iPad 空气

来自 Chrome 的 iPar Pro 模拟器

项目地图组件

function ProjectsMap({ projects }) {
  const sectionData = {
    title: "Profesionalism. Promptitudine. endl Perfectionare.",
    subtitle: "PORTOFOLIU",
    description:
      "Oferim servicii de programare de inalta calitate. Fie ca vorbim de un simplu site de prezentare sau de o Aplicatie Mobila, proiectul tau are aceeasi importanta pentru noi. Facem ideea ta sa fie realitate in cel mai scurt timp posibil. Avem grija la toate detaliile proiectului tau. Produsul final va fi exact ceea ce iti doresti. Ne place sa invatam lucruri noi. In fiecare zi, ne perfectionam in ceea ce stim deja. Suntem deschisi intotdeauna la noile trenduri ale industriei si dornici sa ne adaptam.",
  }

  return (
    <div className="projects">
      <TextSection data={sectionData} />
      <div className="projects__container">
        {projects.map(project => {
          return (
            <Link
              style={{ backgroundImage: `url(${project.picture})` }}
              className="projects__item"
              key={project.title}>
              <div className="projects__item__overlay">
                <span>{project.title}</span>
              </div>
            </Link>
          )
        })}
      </div>
    </div>
  )
}

SCSS

.projects {
  padding: 100px 90px;

  &__container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
  }

  &__item {
    width: 50%;
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center;
    aspect-ratio: 16 / 9;
    transition: all 1.2s;

    &:hover {
      background-size: 130%;
    }

    &__overlay {
      position: relative;
      width: 100%;
      height: 100%;
      z-index: 1;
      transition: all 0.3s;
      display: flex;
      align-items: center;
      justify-content: center;

      &:hover {
        background-color: rgba(0, 0, 0, 0.5);
        background-size: 150% !important;

        span {
          display: block;
        }
      }

      span {
        display: none;
        color: #fff;
        font-size: 36px;
        text-shadow: 0px 3px 5px gray;
      }
    }
  }
}

@media (max-width: 990px) {
  .projects {
    padding: 100px 30px;

    &__container {
      grid-template-columns: 100%;
    }
  }
}

@media (max-width: 600px) {
  .projects__item {
    width: 100%;
  }
}

Answer 1

aspect-ratio is not supported 在您的 iOS 版 Safari 中。它将在第 15 版中提供。

您可以在此期间使用this padding trick。