Ошибка подтверждена: iOS Ма c v2015 + iPhone 11: оба работают Safari
Работает с: iOS Ма c 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 делает свои странные маги c. Все <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: S CSS (частично):
@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;
}
}
}
}
}