html - Apple/iPhone 上的链接无法正常工作

Question

我的任务是让网站具有响应性。为了匹配桌面版本的风格，我决定使用视差滚动。我仍在学习很多关于网页设计的知识，但我谨慎地使用了可以在手机上正常运行的示例。

滚动效果很好，我遇到的问题是 iPhone 和 Safari 桌面上的链接。在 iPhone 上，最后一部分的链接似乎总是在最上面，而在桌面上的 Safari 上，第一部分链接总是在最上面。在其他浏览器、Chrome、Firefox 和 Opera 中，链接可以正常工作。

我已经尝试了几种方法，例如设置 z-index、将每个部分设置为不同的视口(viewport)级别等等，但我现在卡住了。我不确定我是应该发布所有代码还是只发布其中的一部分并链接到我的代码笔。下面是带有相应 css 的 html 的一部分。

<section class="hero" id="section-0">
    <figure></figure>
    <h2 class="hero__title">Tagline</h2>
    <div class='hero__container'>
        <div class='banner__brand'>
            <h1 class='banner__heading'><span>BRAND NAME </br>
                BRAND </span>&nbsp;&nbsp;of Location</h1>
        </div>
        <div class='banner__content'>
            <div class='paragraph u-center-text u-margin-bottom-large'>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nam aliquam sem et tortor. Nulla pellentesque dignissim enim sit amet venenatis. 
            </div>

            <div class='banner__subheading u-center-text u-margin-bottom-small'><a class='banner__link' href='https://images.unsplash.com/photo-1531185038189-41815d864f32?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1525&q=80'>Enter Site &rarr;</a></div>
            <div class='banner__subheading u-center-text u-margin-bottom-medium'>Scroll Down &or;</div>

        </div>
    </div>
</section>

还有CSS...

figure {
  display: flex;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.hero {
    position: relative;
    overflow: hidden;
    height: 100vh;
    -webkit-clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 0);
          clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 0);
}
/* SPLASH PAGE / INTRO PAGE */
.hero:nth-child(1) figure {
  background-image: url("https://images.unsplash.com/photo-1531185038189-41815d864f32?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1525&q=80");
  background-size: cover;
  background-position: center center;
}
/* CHRISTMAS */
.hero:nth-child(2) figure { 
    background-image: url("https://images.unsplash.com/photo-1523358962111-f4baa9f94af8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1950&q=80");
    background-size: cover;
    background-position: center center;
}
/* SUMMER */
.hero:nth-child(3) figure {
    background-image: url("https://images.unsplash.com/photo-1512990414788-d97cb4a25db3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1603&q=80");
    background-size: cover;
    background-position: center center;
}
/* SCHEDULE */
.hero:nth-child(4) figure {
    background-image: url("https://images.unsplash.com/photo-1487529200833-5dcd537f115b?ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80");
    background-size: cover;
    background-position: center center;
}
/* PAGE 1 */
.hero:nth-child(5) figure {
    background-image: url("https://images.unsplash.com/photo-1456894332557-b03dc5cf60d5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2689&q=80");
    background-size: cover;
    background-position: center center;
}
.
.
.

这是我的 CodePen

我确实有一个备份计划，将链接区域设置为一个页面，但非常希望每个部分都有单独的链接。

Answer 1

如果除 Safari 之外的所有浏览器都可以正常工作。您必须执行以下操作。

改变

最重要的你错过了 Viewport meta tags .您使用了 <meta name="viewport" content="width=device-width, initial-scale=1.0"> .但是你必须使用 <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no"> .使用 shrink-to-fit=no 的好处将此添加到视口(viewport)元标记可恢复 Safari 9.0 之前的行为。详见here .

*, 
*::after,
*::before {
    margin: 0;
    padding: 0;
    box-sizing: inherit;
}

到

*, 
*:after,
*:before {
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* border-box or content-box */
}

详见 MDN

添加

我看到您没有使用 Normalize.css。 Normalize.css是一个小型 CSS 文件，可在 HTML 元素的默认样式中提供更好的跨浏览器一致性。它是一种现代的、HTML5 就绪的替代传统 CSS 重置的方法。

删除

box-sizing: border-box来自 body .当您使用 *,*:after,*:before{box-sizing: border-box}您不再需要特定的 Box Model 属性。