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
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 <input id="autocomplete-on" type="checkbox" autocomplete="on">
<br><br>
<a href="https://google.com/">Navigate away</a>
Aucun commentaire:
Enregistrer un commentaire