html - 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>'s 似乎都堵塞在左下角，就好像他们有同一个父母一样。知道是什么原因造成的吗？

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;
        }
      }
    }
  }
}

标签： htmlioscsssafari

Answer 1

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

或者

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

打印屏幕：