Website not displayed correct in Safari MOBILE (viewport/dynamic)

Ask us anything
1

Hi there,
I’m new here because I’m trying to fix a problem on my new website and it doesn’t work for weeks now.
If I open a single project html the menu bar and the logo are displayed on top where they should be shown (left image). If I open another page (project page) the viewport doesn’t adapt and the fullscreen image and the menu/logo are displayed wrong (please see the attached file).

error_ios_17_3_iphone15_pro
error_ios_17_3_iphone15_pro1920×2088 224 KB

In the css there is a section called .section.fullscreen { min-height: 100vh } and I found out that on Safari there are the new svh, dvh and lvh comands but they don’t work.
On every single project page itself I have

meta name=“viewport” content=“width=device-width, initial-scale=1, viewport-fit=cover”

I don’t know how to fix this, can anyone help please? The problem is that the page is not adapting to the new viewport if you open another one but the previous dynamic viewport stays the same in Safari…seems that the problem is only on the iPhone15pro, iOS 17.3…if you refresh the site manually it works, only if you are opening with a link from the previous page it doesn’t work (an this happens on any project page, just the first one you open is fine, the rest will be wrong as shown on the right image)

Here is the link to my test-page

2

I checked your test site on mobile and, for what it’s worth, I think it looks great; nice job on it. i dont see any obvious issues when the nav bar (when positioned at top and bottom) is collapsed on scroll.

Your description is a bit confusing. Do you see the same issue on your test site? Can you send a video recording?

3

Hi there, thank you so much for your kind answer. Sorry, I’m new and it’s difficult to describe the issue. Please find the attached image

error_ios_17_3_iphone15_pro
error_ios_17_3_iphone15_pro1920×2088 224 KB

  1. I have 13 single project pages.
  2. If I open one of those pages everything is fine (left part of the image).
  3. If I scroll down the viewport changes and if you click on EXPLORE MORE WORK the next single project page opens
  4. BUT (coming from any previous page) the result is the one on the right side of the attached image.
  5. Safari does not reposition the website
  6. If you refresh manually the page will be reloaded correctly

This happens on the iPhone 15 pro, iOS17.3 and it seems to happen only there but I don’t understand why.
If you check other websites everything is fine. Seems that Safari does not recognize to reposition (I don’t know how to write that). Every page should open the same way.

Is that a better description :slight_smile: ???

4

am having the same issue…were you able to find a solution? thank you!