The modal always displays incompletely, with the header being blocked.

davetodave178

@Nodeloc Thanks for the ping back. Can you please verify on your end that the dynamic viewport units (i.e. 100dvh) are actually being used or what's going on? If you've got a MacBook, you can check out https://developer.apple.com/documentation/safari-developer-tools/inspecting-ios to see how to use the element inspector for websites on iOS/iPadOS. I'm sure there is something similar for Chrome/Firefox on other Unix distros or on Windows. In any case, I'll take another look and also test it on Android devices.

Nodeloc

davetodave178 Thank you for your reply. My system is Apple iOS 17.1.2, and my website is https://www.nodeloc.com, which is a Chinese website that may cause inconvenience for you. However, you can refer to the CSS on my website. I have added two instances of "dvh", but it doesn't seem to have any effect. I have tested it on three mobile browsers: Safari, Mobile Edge, and Mobile Chrome. Only Edge displays it correctly, while Safari and Chrome do not. The version of Chrome I am using is 120.0.6099.119.

davetodave178

Nodeloc The site being Chinese is not an issue whatsoever, no worries 😉 I had a brief look and when first loading your community on iOS 16.6.1 the Sign Up and Log in Modal were displayed as expected:

When inspecting the element, 100dvh was, in fact, correctly used. But for some reason, after browsing the community for a bit and trying again, the Sign Up and Log in Modal were displayed incorrectly as you reported it (as well after soft reloading the page). Furthermore, 100dvh was not loaded in the CSS in this case and only 100vh was available.

After completely closing the tab and visiting the community a second time, the Modal was again correctly displayed with 100dvh. This leads me to believe that this may be a caching issue. Did you try to clear the cache in the administrator interface or with php flarum cache:clear?

Nodeloc

davetodave178 Did you try to clear the cache in the administrator interface or with php flarum cache:clear?

Yes, I run the php flarum cache:clear command every time after I make changes to the files.

davetodave178 For troubleshooting purposes, you could also try adding !important to your dynamic min-height and leave the regular min height as it is e.g.

By adding !important; it's still not working.

davetodave178 When inspecting the element, 100dvh was, in fact, correctly used. But for some reason, after browsing the community for a bit and trying again, the Sign Up and Log in Modal were displayed incorrectly as you reported it (as well after soft reloading the page).

Based on my testing, I found that every time I refresh the page, the first login is correct, but subsequent logins are incorrect. When I refresh the page again, the first login is correct again. Is it possible that the CSS is being overridden by JavaScript?

davetodave178

For troubleshooting purposes, you could also try adding !important to your dynamic min-height and leave the regular min height as it is e.g.

.Modal-content {
    ...
    min-height: 100vh;
    min-height: 100dvh !important;
    ...
}

davetodave178

Nodeloc Yeah it's totally possible that other parts of the code are overriding this. Do you have a development instance where you can try to disable extensions and see if the issue persists?

Litalino

The css above works for me.. remember to clear the cache

Nodeloc

davetodave178 Hi , I just deploy a new instance with no extensions. The same issue : First time is correct and second time incorrect. I even haven't modify the modal css. Demo site:http://50.114.74.196/ Please ref the site.

Nodeloc

Every time I open the sidebar and click login, it’s correct, and the if I close the sidebar and reopen it, I click the login again, it’s still correct. But if I don’t close the sidebar and click login for twice, it’s will incorrect.

davetodave178

Nodeloc That's so strange. With the absence of 100dvh the Sign up and Log in Modals are always displayed incorrectly on my iPhone 12 running iOS 16.6.1. I can't imagine iOS 17 is really a factor here but if anyone else is running 17 please also have a look. Edit: Focus or not on the community title in the sidebar doesn't have an effect on my end.

Nodeloc

And I found that the difference between them is when correct no text box is focus, when incorrect it’s focus.

Nodeloc

davetodave178 After all I solved with this code.

  @supports (-webkit-touch-callout: none) {
    .Modal {
        top: -webkit-fill-available;
      }
      .Modal-content {
        min-height: -webkit-fill-available;
      }
   }

« Previous Page