User Profile

@jason Thank you for answer. The code I worked on is an internal service, so I cannot disclose it, but Similarly, I worked on codesandbox. This issue appears in webviews. https://codesandbox.io/s/still-rain-gx5b4h It is plain html and css coding, and the problematic part is the red area. main { position: relative; display: flex; flex-direction: column; align-items: center; } It is the state that flex is given to the main tag, and the child has the position property. I don't know if the css specific attribute is unstable in safari or the main tag attribute itself is the problem. In particular, only in safari (including the latest version) intermittently the area with the red border takes up space, and the elements (including children) are not rendered on the screen. like css visibility: hidden; It had the same effect as the reference. And when I scrolled, the above phenomenon suddenly disappeared. the suspicious part Safari flex, position properties ruin the layout The image of the .button1 class is not loaded, so its parent is not rendered. Because of the pseudo-Element's ::before property position:fiexd, it is covered with z-index (?). However, if it is covered, the rest of the properties should be covered, but only the main tag area with a red border disappears. This is a phenomenon that appears 1 or 2 times out of 10, so it is not possible to debug properly. I've googled and looked at a lot of github issues, but I can't find any issues with the same issue as mine. What's wrong? I found a similar problem https://github.com/nolimits4web/swiper/issues/3527 This seems to be a swiper dependency problem. (The phenomenon shown in the screenshot is the same. The process is different) https://wordpress.stackexchange.com/questions/280537/some-text-of-website-page-on-iphone-safari-become-invisible This part could not be rendered because the font could not be loaded. However, since I am using the system font, I could not solve the problem in the same way as above. (The screen result issue is the same issue)