samedi 7 novembre 2020

iOS checkbox state changes after a short delay when browser back button is pressed

I'm experiencing a strange issue with checkboxes in iOS. Here's how to reproduce this :

  • Open the codepen (cdpn.io) link below
  • Check both the boxes
  • Click the "navigate away" link
  • Press browser back button
  • The checkbox state should be checked (with autocomplete on) and unchecked (with autocomplete off). This is how desktop browsers behave.
  • In case of iOS (both Chrome & Safari), the checkbox with autocomplete="off" is true instantly (incorrect value), and after a short delay it becomes false (the expected value)

You can try it on this snippet (source is below, but this link is cleaner to debug on small screen) :

https://cdpn.io/fidd809/debug/RwRYBYo/ZoABaLBjPnKr

I've logged the state to document.body because console may not be accessible in iOS devices.

Output for iOS browser after back button is pressed

enter image description here

Source :

var logState = function(){
    var acOff = document.querySelector('#autocomplete-off');
    var acOn = document.querySelector('#autocomplete-on');

    console.log('autocomplete off, checkbox state : ' + acOff.checked);
    console.log('autocomplete on , checkbox state : ' + acOn.checked);
    setTimeout(function(){
        console.log('autocomplete off, checkbox state after delay : ' + acOff.checked);
        console.log('autocomplete on , checkbox state after delay : ' + acOn.checked);
    }, 500);
}

window.addEventListener('pageshow', logState);
Autocomplete Off <input id="autocomplete-off" type="checkbox" autocomplete="off">
<br>
Autocomplete On &nbsp;<input id="autocomplete-on" type="checkbox" autocomplete="on">
<br><br>
<a href="https://google.com/">Navigate away</a>



Aucun commentaire:

Enregistrer un commentaire