Hello! In iPhone 15.5, intermittently, some parts of one page, especially the top area, are covered with something that is not the screen I was working on. And if you scroll, that area disappears and you can see the html areas I coded in the past. how can i solve this?
Hello Jangseonho. Without code that demonstrates the issue, it'll be difficult to help you diagnose what's happening. Consider posting a small snippet of code that shows the issue, a screenshot or link to a video, etc.
—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)