Mixing
Array state will be cached in iOS 12 Safari, is bug or feature?
Clash Royale CLAN TAG#URR8PPP
up vote
60
down vote
favorite
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 refresh page, the array's value is still reversed. Is this a bug or a feature of new Safari ?
thanks
Add a demo page, try it use iOS 12 Safari：
https://cdn.miss.cat/demo/ios12-safari-bug.html
javascript ios safari ios12
asked 19 hours ago
abelyao
20126
New contributor
abelyao is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
add a comment |Â
up vote
60
down vote
favorite
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 refresh page, the array's value is still reversed. Is this a bug or a feature of new Safari ?
thanks
Add a demo page, try it use iOS 12 Safari：
https://cdn.miss.cat/demo/ios12-safari-bug.html
javascript ios safari ios12
asked 19 hours ago
abelyao
20126
New contributor
abelyao is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
1
Bug confirmed also in macOS 10.14 Mojave - i.imgur.com/ZJtJJC1.png
– a_rahmanshah
1 hour ago
@a_rahmanshah thx for your supplement, it's shocking
– abelyao
1 hour ago
add a comment |Â
up vote
60
down vote
favorite
up vote
60
down vote
favorite
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 refresh page, the array's value is still reversed. Is this a bug or a feature of new Safari ?
thanks
Add a demo page, try it use iOS 12 Safari：
https://cdn.miss.cat/demo/ios12-safari-bug.html
javascript ios safari ios12
asked 19 hours ago
abelyao
20126
New contributor
abelyao is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
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 refresh page, the array's value is still reversed. Is this a bug or a feature of new Safari ?
thanks
Add a demo page, try it use iOS 12 Safari：
https://cdn.miss.cat/demo/ios12-safari-bug.html
javascript ios safari ios12
javascript ios safari ios12
asked 19 hours ago
abelyao
20126
New contributor
abelyao is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
asked 19 hours ago
abelyao
20126
New contributor
abelyao is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
edited 2 hours ago
asked 19 hours ago
abelyao
20126
New contributor
abelyao is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
asked 19 hours ago
abelyao
20126
asked 19 hours ago
abelyao
20126
20126
New contributor
abelyao is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
New contributor
abelyao is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
abelyao is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
1
Bug confirmed also in macOS 10.14 Mojave - i.imgur.com/ZJtJJC1.png
– a_rahmanshah
1 hour ago
@a_rahmanshah thx for your supplement, it's shocking
– abelyao
1 hour ago
add a comment |Â
1
Bug confirmed also in macOS 10.14 Mojave - i.imgur.com/ZJtJJC1.png
– a_rahmanshah
1 hour ago
@a_rahmanshah thx for your supplement, it's shocking
– abelyao
1 hour ago
1
1
Bug confirmed also in macOS 10.14 Mojave - i.imgur.com/ZJtJJC1.png
– a_rahmanshah
1 hour ago
Bug confirmed also in macOS 10.14 Mojave - i.imgur.com/ZJtJJC1.png
– a_rahmanshah
1 hour ago
@a_rahmanshah thx for your supplement, it's shocking
– abelyao
1 hour ago
@a_rahmanshah thx for your supplement, it's shocking
– abelyao
1 hour ago
add a comment |Â
4 Answers
4
active
oldest
votes
up vote
36
down vote
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.
answered 14 hours ago
hax
394210
add a comment |Â
up vote
4
down vote
I wrote a lib to fix the bug.
https://www.npmjs.com/package/array-reverse-polyfill
There is my code https://github.com/fanmingfei/array-reverse-ios12
answered 16 hours ago
Edire Fan
973
good job, I will try it
– justjavac
10 hours ago
1
While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. - From Review
– Rob
17 mins ago
3
It's only 21 lines, could you please just paste the code snippet here?
– Job
10 mins ago
add a comment |Â
up vote
-6
down vote
It's terrible bug, Try this shim for Array.reverse : https://www.npmjs.com/package/array-reverse-polyfill
edited 1 hour ago
aWebDeveloper
18.2k27116188
answered 8 hours ago
Terry King
11
New contributor
Terry King is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
5
Hi Terry, it looks like this answer was already provided by Edire about 7 hours before yours. It's good practice to read other answers first and not duplicate existing ones.
– Chris
1 hour ago
add a comment |Â
up vote
-11
down vote
In Vue, The reverse function of Array had been rewritten， So if you use in this way, it's safe:
export default()
data()
return
arr: [1,2,3]
,
created()
this.arr.reverse()
but if you call the reverse function natively, the bug is still there：
const arr = [1,2,3]
arr.reverse()
export default()
data()
return
arr
answered 8 hours ago
Terry King
11
New contributor
Terry King is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
3
Hey Terry, the original example isn't using Vue so I don't think this applies here.
– Omar Bahareth
1 hour ago
add a comment |Â
4 Answers
4
active
oldest
votes
4 Answers
4
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
36
down vote
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.
answered 14 hours ago
hax
394210
add a comment |Â
up vote
36
down vote
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.
answered 14 hours ago
hax
394210
add a comment |Â
up vote
36
down vote
up vote
36
down vote
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.
answered 14 hours ago
hax
394210
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.
answered 14 hours ago
hax
394210
answered 14 hours ago
hax
394210
answered 14 hours ago
hax
394210
answered 14 hours ago
hax
394210
394210
add a comment |Â
add a comment |Â
up vote
4
down vote
I wrote a lib to fix the bug.
https://www.npmjs.com/package/array-reverse-polyfill
There is my code https://github.com/fanmingfei/array-reverse-ios12
answered 16 hours ago
Edire Fan
973
good job, I will try it
– justjavac
10 hours ago
1
While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. - From Review
– Rob
17 mins ago
3
It's only 21 lines, could you please just paste the code snippet here?
– Job
10 mins ago
add a comment |Â
up vote
4
down vote
I wrote a lib to fix the bug.
https://www.npmjs.com/package/array-reverse-polyfill
There is my code https://github.com/fanmingfei/array-reverse-ios12
answered 16 hours ago
Edire Fan
973
good job, I will try it
– justjavac
10 hours ago
1
While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. - From Review
– Rob
17 mins ago
3
It's only 21 lines, could you please just paste the code snippet here?
– Job
10 mins ago
add a comment |Â
up vote
4
down vote
up vote
4
down vote
I wrote a lib to fix the bug.
https://www.npmjs.com/package/array-reverse-polyfill
There is my code https://github.com/fanmingfei/array-reverse-ios12
answered 16 hours ago
Edire Fan
973
I wrote a lib to fix the bug.
https://www.npmjs.com/package/array-reverse-polyfill
There is my code https://github.com/fanmingfei/array-reverse-ios12
answered 16 hours ago
Edire Fan
973
edited 14 hours ago
answered 16 hours ago
Edire Fan
973
answered 16 hours ago
Edire Fan
973
answered 16 hours ago
Edire Fan
973
973
good job, I will try it
– justjavac
10 hours ago
1
While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. - From Review
– Rob
17 mins ago
3
It's only 21 lines, could you please just paste the code snippet here?
– Job
10 mins ago
add a comment |Â
good job, I will try it
– justjavac
10 hours ago
1
While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. - From Review
– Rob
17 mins ago
3
It's only 21 lines, could you please just paste the code snippet here?
– Job
10 mins ago
good job, I will try it
– justjavac
10 hours ago
good job, I will try it
– justjavac
10 hours ago
1
1
While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. - From Review
– Rob
17 mins ago
While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. - From Review
– Rob
17 mins ago
3
3
It's only 21 lines, could you please just paste the code snippet here?
– Job
10 mins ago
It's only 21 lines, could you please just paste the code snippet here?
– Job
10 mins ago
add a comment |Â
up vote
-6
down vote
It's terrible bug, Try this shim for Array.reverse : https://www.npmjs.com/package/array-reverse-polyfill
edited 1 hour ago
aWebDeveloper
18.2k27116188
answered 8 hours ago
Terry King
11
New contributor
Terry King is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
5
Hi Terry, it looks like this answer was already provided by Edire about 7 hours before yours. It's good practice to read other answers first and not duplicate existing ones.
– Chris
1 hour ago
add a comment |Â
up vote
-6
down vote
It's terrible bug, Try this shim for Array.reverse : https://www.npmjs.com/package/array-reverse-polyfill
edited 1 hour ago
aWebDeveloper
18.2k27116188
answered 8 hours ago
Terry King
11
New contributor
Terry King is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
5
Hi Terry, it looks like this answer was already provided by Edire about 7 hours before yours. It's good practice to read other answers first and not duplicate existing ones.
– Chris
1 hour ago
add a comment |Â
up vote
-6
down vote
up vote
-6
down vote
It's terrible bug, Try this shim for Array.reverse : https://www.npmjs.com/package/array-reverse-polyfill
edited 1 hour ago
aWebDeveloper
18.2k27116188
answered 8 hours ago
Terry King
11
New contributor
Terry King is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
It's terrible bug, Try this shim for Array.reverse : https://www.npmjs.com/package/array-reverse-polyfill
edited 1 hour ago
aWebDeveloper
18.2k27116188
answered 8 hours ago
Terry King
11
New contributor
Terry King is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
edited 1 hour ago
aWebDeveloper
18.2k27116188
edited 1 hour ago
aWebDeveloper
18.2k27116188
edited 1 hour ago
aWebDeveloper
18.2k27116188
18.2k27116188
answered 8 hours ago
Terry King
11
New contributor
Terry King is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
answered 8 hours ago
Terry King
11
answered 8 hours ago
Terry King
11
11
New contributor
Terry King is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
New contributor
Terry King is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
Terry King is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
5
Hi Terry, it looks like this answer was already provided by Edire about 7 hours before yours. It's good practice to read other answers first and not duplicate existing ones.
– Chris
1 hour ago
add a comment |Â
5
Hi Terry, it looks like this answer was already provided by Edire about 7 hours before yours. It's good practice to read other answers first and not duplicate existing ones.
– Chris
1 hour ago
5
5
Hi Terry, it looks like this answer was already provided by Edire about 7 hours before yours. It's good practice to read other answers first and not duplicate existing ones.
– Chris
1 hour ago
Hi Terry, it looks like this answer was already provided by Edire about 7 hours before yours. It's good practice to read other answers first and not duplicate existing ones.
– Chris
1 hour ago
add a comment |Â
up vote
-11
down vote
In Vue, The reverse function of Array had been rewritten， So if you use in this way, it's safe:
export default()
data()
return
arr: [1,2,3]
,
created()
this.arr.reverse()
but if you call the reverse function natively, the bug is still there：
const arr = [1,2,3]
arr.reverse()
export default()
data()
return
arr
answered 8 hours ago
Terry King
11
New contributor
Terry King is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
3
Hey Terry, the original example isn't using Vue so I don't think this applies here.
– Omar Bahareth
1 hour ago
add a comment |Â
up vote
-11
down vote
In Vue, The reverse function of Array had been rewritten， So if you use in this way, it's safe:
export default()
data()
return
arr: [1,2,3]
,
created()
this.arr.reverse()
but if you call the reverse function natively, the bug is still there：
const arr = [1,2,3]
arr.reverse()
export default()
data()
return
arr
answered 8 hours ago
Terry King
11
New contributor
Terry King is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
3
Hey Terry, the original example isn't using Vue so I don't think this applies here.
– Omar Bahareth
1 hour ago
add a comment |Â
up vote
-11
down vote
up vote
-11
down vote
In Vue, The reverse function of Array had been rewritten， So if you use in this way, it's safe:
export default()
data()
return
arr: [1,2,3]
,
created()
this.arr.reverse()
but if you call the reverse function natively, the bug is still there：
const arr = [1,2,3]
arr.reverse()
export default()
data()
return
arr
answered 8 hours ago
Terry King
11
New contributor
Terry King is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
In Vue, The reverse function of Array had been rewritten， So if you use in this way, it's safe:
export default()
data()
return
arr: [1,2,3]
,
created()
this.arr.reverse()
but if you call the reverse function natively, the bug is still there：
const arr = [1,2,3]
arr.reverse()
export default()
data()
return
arr
answered 8 hours ago
Terry King
11
New contributor
Terry King is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
answered 8 hours ago
Terry King
11
New contributor
Terry King is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
answered 8 hours ago
Terry King
11
answered 8 hours ago
Terry King
11
11
New contributor
Terry King is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
New contributor
Terry King is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
Terry King is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
3
Hey Terry, the original example isn't using Vue so I don't think this applies here.
– Omar Bahareth
1 hour ago
add a comment |Â
3
Hey Terry, the original example isn't using Vue so I don't think this applies here.
– Omar Bahareth
1 hour ago
3
3
Hey Terry, the original example isn't using Vue so I don't think this applies here.
– Omar Bahareth
1 hour ago
Hey Terry, the original example isn't using Vue so I don't think this applies here.
– Omar Bahareth
1 hour ago
add a comment |Â
abelyao is a new contributor. Be nice, and check out our Code of Conduct.
abelyao is a new contributor. Be nice, and check out our Code of Conduct.
abelyao is a new contributor. Be nice, and check out our Code of Conduct.
abelyao is a new contributor. Be nice, and check out our Code of Conduct.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f52390368%2farray-state-will-be-cached-in-ios-12-safari-is-bug-or-feature%23new-answer', 'question_page');
);
Post as a guest
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
1
Bug confirmed also in macOS 10.14 Mojave - i.imgur.com/ZJtJJC1.png
– a_rahmanshah
1 hour ago
@a_rahmanshah thx for your supplement, it's shocking
– abelyao
1 hour ago