I've just experienced some strange behaviour of webkit browsers which I have no explanation for. Maybe, someone could enlighten me.
I built an off-canvas menu solution following this tutorial. While everything was working fine both in webkit and mozilla browsers, after some tweaking it suddenly stopped working in webkit browsers. Took me quite some painful time until I finally figured out, that a button element inside a label element for an outside positioned checkbox would not toggle the checkbox in webkit, but it does in firefox.
Leaving the actual off-canvas effect out for simplicity reasons, the effect can be experienced shown this html code snippet:
<body>
<input type="checkbox" id="offcanvas" class="toggle">
<div class="wrapper">
<aside class="main-navigation--container">
<nav>
<p>one</p>
<p>two</p>
<p>three</p>
</nav>
</aside>
<div class="page--content-wrapper">
<label class="biglabel" for="offcanvas"></label>
<label for="offcanvas" class="toggler">
<button type="button" class="navbar--menu-toggle">
Toggle Menu
</button>
</label>
<div class="content">
There's lots of content here...
</div>
</div>
</div>
</body>
If you press the button, the checkbox should toggle between :checked and 'unchecked'. This seems not to work in webkit browsers. However, if the button element is replaced by, say, a <p> or <div> element, everything works fine in webkit, too. See here:
.navbar--menu-toggle{
cursor: pointer;
}
<body>
<input type="checkbox" id="offcanvas" class="toggle">
<div class="wrapper">
<aside class="main-navigation--container">
<nav>
<p>one</p>
<p>two</p>
<p>three</p>
</nav>
</aside>
<div class="page--content-wrapper">
<label class="biglabel" for="offcanvas"></label>
<label for="offcanvas" class="toggler">
<div type="button" class="navbar--menu-toggle">
Toggle Menu
</div>
</label>
<div class="content">
There's lots of content here...
</div>
</div>
</div>
</body>
What's the reason for webkit ignoring the button inside a label tag?
Aucun commentaire:
Enregistrer un commentaire