html button checkbox onchange event doesn't get triggered on iOS 14 when unticking checkbox-CodePudding

I have a website temporarily running on droneard.de which includes a CSS menu (taken from https://codepen.io/omar_anwari_/pen/WdBgBg). This solution uses an invisible checkbox. Now I trigger a JS-function to change the opacity of my content wrapper to make the text better readable by using the onchange event at my button. In the JS-function I set a variable to the current opacity and use it to set/animate the opacity to 0.6 if it's 1 and to 1 if it's 0.6 . This works great on all modern browsers, but on Safari on iOS 14.8 and on macOS Big Sur I'm having the problem, that it perfectly loses it's capacity if I tick the checkbox/open the menu, but it doesn't set it back to opacity: 1 when closing the menu / unticking the checkbox. I don't think that the problem is in JavaScript, is it possible that Safari doesn't see the unticking as an "onchange" event?

JavaScript:

function menubackground () {
  var opa_city__var_from_home = $('.fadeinobject').css('opacity');
  if (opa_city__var_from_home == '0.6') {
    $(".fadeinobject").animate({"opacity": "1"}, 230);
  }
  else {
    $(".fadeinobject").animate({"opacity": "0.6"}, 230);
  }
}

HTML:

<input type="checkbox" onchange="menubackground()" />

CodePudding user response：

Opacity is stored internally as a floating point number, and this introduces possible errors. So format the number with a single decimal place before comparing.

function menubackground () {
  var opa_city__var_from_home = $('.fadeinobject').css('opacity');
  if (parseFloat(opa_city__var_from_home).toFixed(1) == '0.6') {
    $(".fadeinobject").animate({"opacity": "1"}, 230);
  }
  else {
    $(".fadeinobject").animate({"opacity": "0.6"}, 230);
  }
}