I built a basic checkbox hack accordion with 3 lists (see code below). list 1,2 and 3 open correctly in chrome. on IOS Safari only list 1 and 2 open correct. List 3 doesn't open in portrait view. When i turn my iphone to landscape view, list 3 appears correct and when i turn back to portrait view, list 3 works fine to. Does someone have an explanation for this strange behavior or could explain what's wrong with the below code?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.section-footer__column-section--list-status:checked+.section-footer__column-section .section-footer__column-section--list{
position: static;
visibility: visible;
z-index: -1;
-webkit-transform: none;
transform: none;
transition: -webkit-transform 0.3s ease;
transition: transform 0.3s ease;
transition: transform 0.3s ease, -webkit-transform 0.3s ease;
}
.section-footer__column-section--list {
overflow: hidden;
visibility: hidden;
position: absolute;
left: 0;
top: 100%;
-webkit-transform: translateY(-100px);
transform: translateY(-100px);
/*lässt Liste beim toggeln einfliegen von pos -100*/
padding-bottom: 16px;
}
</style>
</head>
<body>
<div class="section-footer__column grid__item lap--one-quarter desk--one-quarter">
<input type="checkbox" class="section-footer__column-section--list-status" id="anchor-test1">
<div class="section-footer__column-section">
<label for="anchor-test1">
<h3 class="section-footer__column-section--title">list 1</h3>
</label>
<ul class="section-footer__column-section--list">
<li><a href="">topic 1</a></li>
<li><a href="">topic 2</a></li>
<li><a href="">topic 3</a></li>
<li><a href="">topic 4</a></li>
</ul>
</div>
</div>
<div class="section-footer__column grid__item lap--one-quarter desk--one-quarter">
<input type="checkbox" class="section-footer__column-section--list-status" id="anchor-test2">
<div class="section-footer__column-section ">
<label for="anchor-test2">
<h3 class="section-footer__column-section--title">list 2</h3>
</label>
<ul class="section-footer__column-section--list">
<li><a href="">topic 1 </a></li>
<li><a href="">topic 2 </a></li>
<li><a href="">topic 3</a></li>
<li><a href="">topic 4</a></li>
<li><a href="">topic 5</a></li>
</ul>
</div>
</div>
<div class="section-footer__column grid__item lap--one-quarter desk--one-quarter">
<input type="checkbox" class="section-footer__column-section--list-status" id="anchor-test3">
<div class="section-footer__column-section ">
<label for="anchor-test3">
<h3 class="section-footer__column-section--title">list 3</h3>
</label>
<ul class="section-footer__column-section--list">
<li><a href="">Download 1 </a></li>
<li><a href="">Download 2 </a></li>
<li><a href="">Download 3</a></li>
</ul>
</div>
</div>
</body>
</html>
Aucun commentaire:
Enregistrer un commentaire