fix(modal): fix modal not closing in iOS PWA (#29)
- Add cursor:pointer to .modal-overlay so iOS Safari fires click events on the backdrop (iOS ignores clicks on non-interactive divs without it) - Add touchend fallback listener on overlay for belt-and-suspenders iOS support - Enlarge close button from target-sm (32px) to target-md (40px) to meet Apple touch-target guidelines; remove now-redundant ::before expansion - Swipe-to-close now only activates from the top handle zone (< 48px) or when the panel is scrolled to top, preventing accidental dismissal while scrolling form content downward
This commit is contained in:
@@ -626,6 +626,8 @@
|
||||
align-items: flex-end;
|
||||
justify-content: center;
|
||||
animation: modal-overlay-in 0.2s ease forwards;
|
||||
/* iOS Safari: click-Events auf non-interactive divs erfordern cursor:pointer */
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
@@ -642,6 +644,8 @@
|
||||
overflow-y: auto;
|
||||
border-radius: var(--radius-lg) var(--radius-lg) 0 0;
|
||||
animation: modal-slide-up 0.25s var(--ease-out) forwards;
|
||||
/* Cursor vom Overlay zurücksetzen */
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
@@ -672,8 +676,8 @@
|
||||
}
|
||||
|
||||
.modal-panel__close {
|
||||
width: var(--target-sm);
|
||||
height: var(--target-sm);
|
||||
width: var(--target-md);
|
||||
height: var(--target-md);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@@ -681,12 +685,7 @@
|
||||
color: var(--color-text-secondary);
|
||||
transition: background-color var(--transition-fast);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.modal-panel__close::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: -8px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.modal-panel__close:hover {
|
||||
|
||||
Reference in New Issue
Block a user