Web: 5 Modal/Dialog development problems you should know

In a perfect world, this is what you want:

In a perfect world, this is what you want.

1. Nested Positions

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

2. Overlapping z-index

.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

.parent {
font-size: 24px;
}

4. Scrolling Issues

5. iOS Safari 100vh

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.

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