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

【问题标题】：CSS Safari: Absolute Bottom/Left not working as expectedCSS Safari：绝对底部/左侧未按预期工作
【发布时间】：2023-03-20 15:08:02
【问题描述】：

已确认错误：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;
        }
      }
    }
  }
}

【问题讨论】：

标签： html ios css safari

【解决方案1】：

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

或

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

打印屏幕：

【讨论】：

我的英雄！非常感谢！