Absolutely positioned elements do not respect flex alignment on iOS

By
endzone247
-
0
1
Absolutely positioned elements do not respect flex alignment on iOS


When positioning a flex/grid child absolutely to stack content, the flex position rules are ignored in both chrome and safari on iOS.

This is the minimal example – the item should be positioned on the right.

<div class="container">
  <div class="item">item</div>
</div>

.container {
  border: 1px solid black;
  display: grid;
  height: 80px;
  justify-content: flex-end;
}

.item {
  height: 80px;
  width: 80px;
  background-color: red;
  position: absolute
}

See this Codepen for a more complete example.

On a windows desktop or android phone, in all browsers – all red boxes are right aligned. On an iPhone running iOS in both safari and chrome the absolutely positioned box ignores the flex layout.

Absolutely positioned elements do not respect flex alignment on iOS

I could not find any bug reports or earlier reports on this topic. Does anyone know if this behaviour has been documented?

I am also unsure where to file the bug report since interestingly the issue exists in both chrome and safari, so it might somehow be an issue with the OS.

I appreciate any Input.