I'm attempting to launch a fullscreen modal from within a slideshow (have tested using swiperJS, React Slick, and my own custom slideshow), but the styling doesn't seem to be functioning correctly on Safari/iOS. When not inside a slideshow (using it as a standalone element), or when using something other than Safari/iOS, it seems to launch correctly, but when inside a slideshow it appears that position:fixed, top: 0, and z-index:999999 aren't working. Here is my CSS:
section.model-viewer-modal{
overflow: hidden;
height: 100%;
width: 100%;
visibility: hidden;
border: none;
padding: env(safe-area-inset-top) env(safe-area-inset-right)
env(safe-area-inset-bottom) env(safe-area-inset-left);
margin: 0;
touch-action: revert;
}
section.model-viewer-modal.shown {
flex-direction: row;
overflow-x: hidden;
overflow-y: hidden;
border: none;
padding: env(safe-area-inset-top) env(safe-area-inset-right)
env(safe-area-inset-bottom) env(safe-area-inset-left);
margin: 0px !important;
position: fixed !important;
inset: 0px !important;
height: 100vh !important;
width: 100vw !important;
z-index: 99999999 !important;
display: flex;
visibility: visible;
}
where the .shown class is toggled whenever the modal is launched. When launched inside a slideshow on iOS it stretches the section to the correct length, but it remains in its original position underneath my header rather than moving to the top. It also stays restricted within the slideshow's width/height, with the thumbnails still showing up over it.
Here is an image of the fullscreen working correctly outside of a slideshow
and here is an image of it working incorrectly inside one
I have attempted the solutions here and here as well as similar ones, and have attempted setting my surrounding divs to position:relative and my modal to position:absolute to no avail. Does anyone have any other suggestions?
