mac html没有overflow,html - Overflow:hidden on Mac iOS and Safari - Stack Overflow

I have some HTML and CSS only collapsable tabs. They work perfectly everywhere, other than Mac iOS (Safari, Chrome etc on Mobile) and Safari on desktop. The body content is showing slightly below the tab title. Clicking the tab is working as intended.

.tab {

width: 100%;

color: white;

overflow: hidden;

border-top: 4px solid white;

}

.tab>input {

position: absolute;

opacity: 0;

z-index: -1;

}

.tab-label {

display: -webkit-box;

display: flex;

-webkit-box-pack: justify;

justify-content: space-between;

padding: 1em;

background: #81C152;

font-weight: bold;

cursor: pointer;

}

.tab-content {

max-height: 0;

padding: 0 1em;

color: #2c3e50;

background: white;

-webkit-transition: all .35s;

transition: all .35s;

}

.tab>input:checked~.tab-content {

max-height: 100vh;

padding: 1em;

}

Tab title

Tab body content

Any ideas why this overflow is visible on Safari but all other browsers are ok?