Is there any relevant output in the browser console when loading and/or trying to click?

Does clicking the label (test next to the checkbox) work?

Looked into it with James: the checkbox state does get changed, but Safari doesn't render the green checkbox (even though the inspector says that it's there). I did manage to reproduce with Safari 8 after some more clicking, but it doesn't always happen for me.

The issue is also reproducible in the JS demo, but it takes a lot more clicking to make it happen. Just spam the left mouse button until the check stops flickering.

Change 191476 had a related patch set uploaded (by Bartosz Dziewoński):
Workaround for Safari being useless at being a browser

https://gerrit.wikimedia.org/r/191476

Patch-For-Review

Also affects the radio buttons, by the way.

@Krinkle has spent more time determining the cause of this. Apparently it happens when :checked and + selectors and used, and the element being styled has a background color, a single SVG background-image, and a transition on background-size. Krinkle has more details, or they can be found in logs of #mediawiki-visualeditor.

The "single SVG background-image" part means that this doesn't affect the "mixed" distribution (added per T87501), which uses background-image: linear-gradient(transparent, transparent), url(….svg) rather than just background-image: url(….svg). Therefore this will be fixed in VisualEditor when OOjs UI is updated to 0.8.0. The issue still affects the SVG-only distribution, but it will no longer be used in VE.

Reduced test case: http://s.codepen.io/Krinkle/debug/JoLyzx (view source).

In Safari 8 on OS X 10.9 or 10.10, the check mark often does not appear when clicking the checkbox.

The node's checked property is toggling, and the native checkbox's appearance is updated. But surrounding elements that should match via the :checked selector are ignored. While trivial in this example (given the native checkbox), this technique is used by UI libraries to replace the appearance of the native checkbox (CSS-only; using opacity and z-index). There, the user would perceive the checkbox as being broken (never reaching the checked state).

As @matmarex said already, we narrowed it down to:

• Selector input[type="checkbox"]:checked + span.
• The checkbox in question has no custom styling (user agent default).
• The targeted element is a <span> with:
  • transition on background-size
  • background-color
  • one background-image using SVG

The bug is evaded by either: removing the transition, or removing the background-color, or using a PNG instead of SVG, or creating a second background alongside the SVG (e.g. a dummy transparent gradient).

Upstream: https://bugs.webkit.org/show_bug.cgi?id=141789

Change 191476 abandoned by Bartosz Dziewoński:
Workaround for Safari being useless at being a browser

Reason:
Really bad hack and doesn't help PHP OOUI.

https://gerrit.wikimedia.org/r/191476

Change 191633 had a related patch set uploaded (by Bartosz Dziewoński):
Work around Safari 8 misrendering checkboxes in SVG-only distribution

https://gerrit.wikimedia.org/r/191633

Patch-For-Review

Change 191633 merged by jenkins-bot:
Work around Safari 8 misrendering checkboxes in SVG-only distribution

https://gerrit.wikimedia.org/r/191633

Seems to be working in both - betalabs and test2 - so marking as Verified accordingly.