4

Since Safari 11 for Mac checkboxes (and links/other click-events) are inaccessible when placed in a <legend>, does anyone know of a workaround? JS fiddle contains a demo, neither the checkbox can be checked, nor the click-event fires. Both work in Safari 10.2, but not in Safari 11. Also when I set the legend to position: relative the legend disappears. Setting the fieldset from overflow: hidden to overflow: visible seems to work, but I'd like to keep it hidden, as this could have other consequences in other browsers. Thanks!

Codepen Demo

elveti
  • 2,316
  • 4
  • 20
  • 27
  • 1
    We experience this problem as well, and removing `overflow: hidden` solves the immediate issue in our case. With a bit of luck, this is a bug in Safari which will be fixed. – henko Sep 22 '17 at 04:04
  • 1
    I sent a bug report to Apple as well. Not holding my breath, but with a bit of luck, they'll release a fix. – henko Sep 22 '17 at 06:27
  • 1
    I ended up using JS/jQuery (was included already in my project). If you set the `fieldset` to `position: relative`, then (and only then) the `legend` click event is fired. So now on click I set the checkbox's `pointer-events` to `none` and toggle the checkbox. Demo https://codepen.io/xyb/pen/zEKdqP. Hella ugly, but it works and can be applied to only Safari 11 (via JS) – elveti Sep 22 '17 at 11:50
  • "With a bit of luck, this is a bug in Safari which will be fixed" -> We either didn't have luck, or isn't recognized as a bug. It's still an issue – vandijkstef Sep 17 '21 at 12:38

0 Answers0