In safari in iOS 26 on iPhone i noticed very big design issues regarding modals
Modals that used to take the whole screen height do not anymore so it has a
bad look but mainly if there is a scroll in it then
the scrolling behaviour is horrible and migh need to close and re-open the popup for it to work
Finding
In one of my previous dialogs, i do not know Why or how but there is this “dialog“ element in it.
It actually prevents this space created at the bottom of the modal ! and the scrolling behaviour is less impacted.
I have a lot of modals impacted and i was wondering if it was possible to copy/paste the Dialog in the modal (currently impossible)
This could solve completely my problem and I think this is critical !
Please tell me how i could copy paste the elements in the other modals (maybe there is a quick hack to do so)
Whithout the Dialog element, all around the search bar / url bar / navigation, the Modal does not display anymore and lives blank stuff (and this strange scrolling behaviour) + it makes the design not clear anymore, users are lost and i get complains
By the way this is the dialog element i reffer to : (it’s just here, never toggled or reffered to in my code, don’t even know why it’s here on this modal and not on the other ones)
I did try with the new Popup and does not work either … (and i may have 100 modals so changing all would take days … anyway it does not work)
=> I have a new hint however, I’ve seen some websites where the “old“ behaviour of the search bar is maintained and it’s not void around it so we can’t see through (has a background) … this could be a big fix that solves it all with a line of code i guess ?
=> this fix would mean getting rid of the glass experience of ios26 but would solve it all
I made a website in a few clicks using hostinger builder and it keeps a background under the serach bar (dont pay attention to the design)
I noticed some weird stuff happening with modals on Safari on Mac and IOS 26 as well
what I encountered was if the height of the page container with all regular content (not the modal) is less than the height of the screen, then when the modal is triggered, anything below the container height isn’t rendered at all.
I solved this by adding a min-height of 1080px, but I realise this isn’t an elegant solution.
Attached screenshot gives some idea. Apologies for the potato quality.
Thanks for the report. Unfortunately, I’m having issues replicating the issue. Can you please make a ticket here support.weweb.io with the link to your project so we can take a better look?
