html - 相对定位链接在 Safari 和 iPad Chrome 中不可见

Question

我有一个网页布局，我需要在右上角的固定位置放置一个按钮，就在固定标题下方。我已经在 Windows/Mac/Android 上的 Chrome 上解决了这个问题，但它在 Safari 和 iPad 上的 Chrome 上都不起作用。

我用一个简单的 fiddle 复制了它:https://jsfiddle.net/aorsten/qg76vzue/47/

在 Chrome 中打开 fiddle(iPad 和其他 IOS 产品除外)，您将在右上角看到一个“THIS LINK”链接。然而，在 Safari 中，链接是不可见的，即使链接看起来可以点击，并且悬停会产生指针光标。

除了这个 CSS 和 HTML 之外，我还在使用 bootstrap 来设置样式:

html {
  position: relative;
  background: #fff;
  min-height: 100%;
}
.headbar {
  height: 10.5vh;
  box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.8);
}
.headbar img {
  height: 8vh;
}
article {
  padding-top: 5vh;
  padding-left: 15px;
  padding-right: 15px;
}

.main-article {
  display: block;
  flex-basis: 100%;
  flex-grow: 0;
  flex-shrink: 0;
  max-width: 100%;
  min-height: 1px;
  position: relative;
}
.article-open {
  margin-right: 0;
}
.article-closed {
  padding-left: 10%;
  margin-right: 45px;
}

.padfix {
  padding-left: 0;
  padding-right: 0;
}

.front-header {
  display: table;
  background: #ccc;
  height: 75vh;
  width: 100%;
  padding: 0;
  margin: 0;
}
.title-box {
  display: table-cell;
  vertical-align: bottom;
  padding: 0;
}
.title-bottom {
  background: rgba(0, 0, 0, 0.6);
  padding-bottom: 2vh;
}
.title {
  margin: 2vh 0;
  font-size: 3.5rem !important;
}

.report-area {
  position: relative;
  max-width: 100vw;
}
.main-article {
  display: block;
  flex-basis: 100%;
  flex-grow: 0;
  flex-shrink: 0;
  max-width: 100%;
  min-height: 1px;
  position: relative;
}
.article-open {
  margin-right: 46vw;
}
.article-closed {
  padding-left: 10%;
  margin-right: 0;
}

.padfix {
  padding-left: 0;
  padding-right: 0;
}

.content-area {
  margin-bottom: 0;
}

.workspace-side-closed-fixed {
  background: #fff;
  position: fixed !important;
  top: 10.5vh;
  left: 100vw !important;
  height: 89.5vh;
  max-height: 89.5vh;
  overflow: hidden;
  width: auto !important;
  padding: 0 !important;
  z-index: 5;
}

.workspace-button-side-closed-fixed {
  position: fixed;
  top: 10.5vh;
  left: 100vw;
  border: 0;
  height: auto;
  display: inline-block;
  vertical-align: top;
}
.btn-link-side-closed, .btn-link-side-closed-fixed {
  position: relative;
  left: -52px;
  top: 1vh;
  background: #f00;
}
.hidden-stuff {
  display: block;
  width: 46vw;
  max-height: 89.5vh;
  padding-left: 0;
  margin: 0 15px;
  overflow-x: auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

HTML:

<nav class="navbar fixed-top navbar-light bg-white headbar">
  <a>some image</a>
</nav>
<div class="container-fluid main-part">
  <div class="row content-area no-gutters">
    <div class="col-12">

      <header class="jumbotron jumbotron-fluid align-bottom front-header">
        <div class="container-fluid text-white title-box">
          <div class="container-fluid w-100 title-bottom">
            <h1 class="display-4 title">
              MyTitle
            </h1>
          </div>
        </div>
      </header>

    </div>
    <div class="col-12 report-area">
      <div class="workspace-side-closed-fixed">
        <span class="workspace-button-side-closed-fixed">
          <a href="#" class="btn-link-side-closed">THIS LINK</a>
        </span>

        <div class="hidden-stuff">
          <div>
            WORKSPACE INFO PLACED OUTSIDE SCREEN
          </div>
        </div>
      </div>
      <main>
        <article>
          TEXT TEXT<br />TEXT TEXT<br />TEXT TEXT<br />TEXT TEXT<br />
          TEXT TEXT<br />TEXT TEXT<br />TEXT TEXT<br />TEXT TEXT<br />
          TEXT TEXT<br />TEXT TEXT<br />TEXT TEXT<br />TEXT TEXT<br />
          TEXT TEXT<br />TEXT TEXT<br />TEXT TEXT<br />TEXT TEXT<br />
          TEXT TEXT<br />TEXT TEXT<br />TEXT TEXT<br />TEXT TEXT<br />
          TEXT TEXT<br />TEXT TEXT<br />TEXT TEXT<br />TEXT TEXT<br />
          TEXT TEXT<br />TEXT TEXT<br />TEXT TEXT<br />TEXT TEXT<br />
          TEXT TEXT<br />TEXT TEXT<br />TEXT TEXT<br />TEXT TEXT<br />
          TEXT TEXT<br />TEXT TEXT<br />TEXT TEXT<br />TEXT TEXT<br />
          TEXT TEXT<br />TEXT TEXT<br />TEXT TEXT<br />TEXT TEXT<br />
        </article>
      </main>
    </div>
  </div>
</div>

我一直无法解决这个问题，希望有人能帮助我。Safari/IOS 有什么问题？如何使链接可见？

Answer 1

为了使链接可见，我只需从 workspace-side-closed-fixed 中删除 overflow: hidden 行。

Safari 和 iOS 在固定 div 中对此的 react 显然不同于 Windows/Mac 上的 Chrome。