Page MenuHomePhabricator

[Regression wmf17] Safari - cannot click in any check-box
Closed, ResolvedPublic1 Estimated Story Points


Open VE in Safari - Page options: check boxes for e.g. Page settings cannot be checked.
Media settings ->Advanced settings: Position "Wrap text around this item" check box cannot be checked.

Event Timeline

Etonkovidova raised the priority of this task from to High.
Etonkovidova updated the task description. (Show Details)
Etonkovidova added a project: VisualEditor.
Etonkovidova added a subscriber: Etonkovidova.

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

Jdforrester-WMF renamed this task from [Regression wmf-17] Safari - cannot click in any check-box to [Regression wmf17] Safari - cannot click in any check-box.Feb 18 2015, 8:11 PM
Jdforrester-WMF assigned this task to matmarex.

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

matmarex changed the task status from Open to Stalled.Feb 18 2015, 8:38 PM

Can't reproduce on beta labs using (via

  • Safari 8 on Mac OS X 10.10
  • Safari 7 on Mac OS X 10.9
  • Safari 6 on Mac OS X 10.7
  • (Safari 5 doesn't get VE at all.)

Needs reproduction steps.

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


matmarex changed the task status from Stalled to Open.Feb 18 2015, 9:46 PM

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: (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).


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

Really bad hack and doesn't help PHP OOUI.

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


matmarex moved this task from Next-up to Doing on the OOUI board.

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

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