Web: 5 Modal/Dialog development problems you should know

In a perfect world, this is what you want:

Image for post
Image for post
In a perfect world, this is what you want.

1. Nested Positions

Image for post
Image for post
<div style="positon: relative">
<modal-dialog style="position: absolute"/>
</div>

2. Overlapping z-index

Image for post
Image for post
.index-9, .index-overlay, .nuxt-progress {
z-index: 1000000000 !important;
}
...
.index-1, .index-content {
z-index: 10;
}
.index--1 {
z-index: -1;
}

3. Cascading Parent CSS

Image for post
Image for post
.parent {
font-size: 24px;
}

4. Scrolling Issues

Image for post
Image for post

5. iOS Safari 100vh

Image for post
Image for post
What you see when designing. What you see when testing. What the user actually sees. What you actually want.

Conclusion

I am a full-stack capable Web, Android, iOS, DevOps, software engineer and architecture.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store