When rendering 2 'div' components with 'display:flex' placed on top of each other, the preceding one sometimes comes up. The 'position:absolute' has been set and the second 'div' component is being generated after the first one. However, when inspecting the iOS webview in Safari, I enable-disable the 'display:flex' property, everything starts working again. This is possibly a bug in the layout engine.
I tried the same process in iOS 16.4 and there are no issues at all.
Could you please provide a link to a page which shows the problem, or the minimal HTML/CSS that we can use to reproduce this problem?
I am facing this problem inside an app I am building using WKWebView. So sharing the link would be very difficult. If needed, I can share a video of the effect happening in real-time with the iOS 17.0 simulator and Safari Devtools
I'm late on this topic, but I'm stuck with the same issue here, with inline-flex. Deactivating and reactivating through the web inspector makes them appear. This problem only occurs since iOS 17.4, precisely. Also present in iOS 17.5. The code is:
<div class="ruby even">
<ruby class="fontTT">我</ruby>
<div class="trlit">W<em class="sm">ǒ</em></div>
</div>
and the "faulty" CSS:
.ttPhrase .ruby {
display: inline-flex;
flex-direction: column;
justify-content: flex-end;
text-align: center;
}
The chinese characters don't appear at first, but they appear after disabling/re-enabling the inline-flex through the web inspector.