html - CSS 浏览器 : Absolute Bottom/Left not working as expected

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/)扩展。当视口(viewport)低于 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 添加到 Github custom.css 中的 .graphs-container .data-container.columns > div

或

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

打印屏幕: