CSS Safari：绝对底部/左侧未按预期工作

Question

错误已确认：iOS Mac v2015 + iPhone 11：两者都运行Safari

适用于：iOS Mac v2015 + Windows 10 + Android：Chrome 79.0.93 ...，Firefox 71

我有这个https://github.com/frizzant/bulma-graphs（预览：https://frizzant.github.io/bulma-graphs/）扩展名。当视口低于768px时，文本变为垂直，并定位在absolute处，因此它粘在底部。

这在Chrome + Firefox中可以正常工作，但是Safari发挥了其不可思议的作用。所有的<p>似乎都在底部底部堵塞，好像它们具有相同的父级一样。知道是什么原因造成的吗？

HTML（部分）：

<div class="graphs-container" data-title="Horizontal Graph">
    <div class="data-container column is-full columns is-mobile is-size-7 has-text-white is-marginless">
        <div data-title="One" data-value="10"><p>One</p></div>
        <div data-title="Two" data-value="50"><p>Two</p></div>
        <div data-title="Three" data-value="100"><p>Three</p></div>
    </div>
</div>

CSS：SCSS（部分）：

@media screen and (max-width: 768px) {
  .graphs-container {
    .data-container {

      &:not(.is-vertical-graph) > div {
        p {
          position: absolute;
          bottom: -13px;
          left: 5px;

          -webkit-transform: rotate(-90deg);
          -ms-transform: rotate(-90deg);
          transform: rotate(-90deg);
          -webkit-transform-origin: top left;
          -ms-transform-origin: top left;
          transform-origin: top left;

          text-shadow: 0px 0px 2px #000000;
        }
      }
    }
  }
}

Answer 1

在您的Github custom.css中将position: relative添加到.graphs-container .data-container.columns > div

或

在custom.scss中的.data-container.columns > div中