Array state will be cached in iOS 12 Safari, is bug or feature?
Today I found some problem of Array's value state in the newly released iOS 12 Safari, for example, code like this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<title>iOS 12 Safari bugs</title>
<script type="text/javascript">
window.addEventListener("load", function ()
{
let arr = [1, 2, 3, 4, 5];
alert(arr.join());
document.querySelector("button").addEventListener("click", function ()
{
arr.reverse();
});
});
</script>
</head>
<body>
<button>Array.reverse()</button>
<p style="color:red;">test: click button and refresh page, code:</p>
</body>
</html>
After refreshing the page, the array's value is still reversed. Is this a bug or a feature of new Safari?
Add a demo page, try it use iOS 12 Safari:
https://cdn.miss.cat/demo/ios12-safari-bug.html
It's definitely a BUG! And it's a very serious bug.
As my test, the bug is due to the optimization of array initializer which all values are primitive literal. For example () => [1, null, 'x'] will return such arrays, and all return arrays link to same memory address, and some method like toString() is also memorized. Normally, any mutable operation on such array will copy to a individual memory space and link to it, this is so-called copy-on-write technique (https://en.wikipedia.org/wiki/Copy-on-write).
reverse() method will mutate the array, so it should trigger CoW, Unfortunately, it doesn't now, which cause bug.
On the other hand, all methods which do not modify the array should not trigger CoW, and I find that even a.fill(value, 0, 0) or a.copyWithin(index, 0, 0) won't trigger CoW because such callings don't really mutate the array. But I notice that a.slice() WILL trigger CoW. So I guess the real reason of this bug may be someone accidentally swap the index of slice and reverse.
I wrote a lib to fix the bug.
https://www.npmjs.com/package/array-reverse-polyfill
There is my code:
(function() {
function buggy() {
function detect() {
var a = [0, 1];
a.reverse();
return a[0] === 0;
}
return detect() || detect();
}
if(!buggy()) return;
Array.prototype._reverse = Array.prototype.reverse;
Array.prototype.reverse = function reverse() {
if (Array.isArray(this)) this.length = this.length;
return Array.prototype._reverse.call(this);
}
var nonenum = {enumerable: false};
Object.defineProperties(Array.prototype, {
_reverse: nonenum,
reverse: nonenum,
});
})();
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<title>iOS 12 Safari bugs</title>
<script type="text/javascript">
window.addEventListener("load", function ()
{
let arr = [1, 2, 3, 4, 5];
alert(arr.join());
document.querySelector("button").addEventListener("click", function ()
{
arr.reverse();
});
});
</script>
</head>
<body>
<button>Array.reverse()</button>
<p style="color:red;">test: click button and refresh page, code:</p>
</body>
</html>
After refreshing the page, the array's value is still reversed. Is this a bug or a feature of new Safari?
Add a demo page, try it use iOS 12 Safari:
https://cdn.miss.cat/demo/ios12-safari-bug.html
It's definitely a BUG! And it's a very serious bug.
As my test, the bug is due to the optimization of array initializer which all values are primitive literal. For example () => [1, null, 'x'] will return such arrays, and all return arrays link to same memory address, and some method like toString() is also memorized. Normally, any mutable operation on such array will copy to a individual memory space and link to it, this is so-called copy-on-write technique (https://en.wikipedia.org/wiki/Copy-on-write).
reverse() method will mutate the array, so it should trigger CoW, Unfortunately, it doesn't now, which cause bug.
On the other hand, all methods which do not modify the array should not trigger CoW, and I find that even a.fill(value, 0, 0) or a.copyWithin(index, 0, 0) won't trigger CoW because such callings don't really mutate the array. But I notice that a.slice() WILL trigger CoW. So I guess the real reason of this bug may be someone accidentally swap the index of slice and reverse.
I wrote a lib to fix the bug.
https://www.npmjs.com/package/array-reverse-polyfill
There is my code:
(function() {
function buggy() {
function detect() {
var a = [0, 1];
a.reverse();
return a[0] === 0;
}
return detect() || detect();
}
if(!buggy()) return;
Array.prototype._reverse = Array.prototype.reverse;
Array.prototype.reverse = function reverse() {
if (Array.isArray(this)) this.length = this.length;
return Array.prototype._reverse.call(this);
}
var nonenum = {enumerable: false};
Object.defineProperties(Array.prototype, {
_reverse: nonenum,
reverse: nonenum,
});
})();
Comments
Post a Comment