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

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

或者

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

打印屏幕：