search

mdbootstrap / bootstrap-material-design

Important! A new UI Kit version for the latest Bootstrap 5 is available. Access the latest version via the link below
https://mdbootstrap.com/docs/standard/
MIT License
67 stars 42 forks source link

.checkbox-on doesn't work in Safari 14 #5

Open alblue opened 3 years ago

alblue commented 3 years ago

Test Case

https://codepen.io/FezVrasta/pen/JyVWMo?__cf_chl_captcha_tk__=f15e18beebedcdb1f32c83896155cbbb06c74dfc-1612904015-0-Abu4xlnDgO0C95-OAZh6NFL7tD6V7HNzH50HCUQ_cO-a0KS91_ApG1h5XmKOMWIatiy3UNJhUXzceJNa33Xz9P8PvXuZvo_Yt15o1C2I6srixnvlfaQRUiQLVUCHn9TVgFRaMVACBIKRXuwxFVNnzgR7mk7G6lyshE6BHgcBsxwNhpaoncZnzjHQbuf8CvkoAuH86O02j24kKEuSnuwKtmPRc-U8eK_N-gVr8DH9mdeQZvGhukzsacUAs2bPLvmw2MqkHKmfIts0j8OP1kXdq3LT-v41wYka53HybveajlvzT7D_lsKsRbfs4V56QJT4b-2TldDSTYN3ppob49CIFjnFDnIv1pTLu9bsENJfrA9oyZn4JmQ0CFTXdox4iLDA80suNgdCLbkFRFClNxFl1Uwi7pHS0fUJLNbElEl32SG-w5uJJETMj45anI6yur74waYjEBCwycY-y6f5FCU2Va4yGBwz8y4pKozJ5QxukTr3C7t2ibnLH3g0wuKDMD7jWiTC4QSbx__pwwtwQtad-vecOiHv3T4FNQr8KTkkY6l65pO8I1EksN5uh3_Cw2h-IE_ycdaSQxKh2DqgTzlbWvy84lpHb7UeNKHKVIJTpu-v

<div class="checkbox">
  <label>
    <input type="checkbox" class="arg" checked="checked" value="Example"><span class="checkbox-decorator"><span class="check"></span>
      <div class="ripple-container"></div>
    </span> Example
  </label>
</div>

Summary

On Safari 14.0.3/macOS 11.2 using Bootstrap material 4.1.3, the checkbox briefly flashes during animation and then disappears. Visually it is not able to be seen as checked or not.

On Chrome 88 on macOS 11.2 the checkbox is shown correctly.

Expected result

Checkbox should be seen

Additional Information

Originally discovered in https://github.com/gchq/CyberChef/issues/1172 and now reported here with bootstrap material design 4.1.3.

image
alblue commented 3 years ago

I've tested the same on v5 and it works as expected, so this is a bug in the 4.1 version.