CODEWITHSUNDEEP
htmlioscsssafari
Frizzant
Frizzant

Reputation: 768

CSS Safari: Absolute Bottom/Left not working as expected

Bug confirmed on: iOS Mac v2015 + iPhone 11: both running Safari

Works with: iOS Mac v2015 + Windows 10 + Android: Chrome 79.0.93..., Firefox 71

I got this https://github.com/frizzant/bulma-graphs (preview: https://frizzant.github.io/bulma-graphs/ ) extension. When the viewport gets below 768px, the text turns vertical, and is positioned absolute so it sticks to the bottom.

This works as expected in Chrome + Firefox, but Safari does its strange magic. All of the <p>'s seem to clog up at the bottom left, as if they had the same parent. Any idea what is causing this?

HTML (partial):

<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 (partial):

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

Upvotes: 1

Views: 3926

Answers (1)

Lumi
Lumi

Reputation: 439

Add position: relative to .graphs-container .data-container.columns > div in your Github custom.css

or

in .data-container.columns > div in your custom.scss

Printscreen: Printscreen

Upvotes: 5

Related Questions