├── .gitignore
├── .npmignore
├── LICENSE
├── README.md
├── fixed.html
├── index.js
├── origin.html
├── package.json
└── tests
    ├── index.html
    └── tests.js


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | .DS_Store
3 | 
4 | npm-debug.log*
5 | yarn-debug.log*
6 | yarn-error.log*
7 | 


--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
1 | tests/*
2 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2018 明非
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | ![iOS-12-reverse](https://user-images.githubusercontent.com/159840/45736779-8a4ad180-bc1e-11e8-9022-b58935f026eb.png)
 2 | 
 3 | # array-reverse-polyfill
 4 | Fixed Array `reverse()` Bug of Safari 12.0 on iOS 12 and MacOS. 
 5 | 
 6 | ## About the Bug
 7 | 
 8 | https://bugs.webkit.org/show_bug.cgi?id=188794
 9 | 
10 | https://stackoverflow.com/q/52390368/7606327
11 | 
12 | https://www.v2ex.com/t/490590 (in Chinese)
13 | 
14 | https://zhuanlan.zhihu.com/p/44869607 (in Chinese)
15 | 
16 | A simple visualization of this bug:
17 | 
18 | ![bug-metaphor](https://user-images.githubusercontent.com/2784308/45812030-411f7e00-bd01-11e8-8b84-93cddc0a4c66.gif)
19 | 
20 | (Thank @yisibl for his magical realism style drawing / 感谢灵魂画手一丝姐姐)
21 | 
22 | ## Usage
23 | 
24 | ### CDN
25 | 
26 | jsDelivr
27 | ```html
28 | <script src="https://cdn.jsdelivr.net/npm/array-reverse-polyfill"></script>
29 | ```
30 | 
31 | unpkg
32 | ```html
33 | <script src="https://unpkg.com/array-reverse-polyfill"></script>
34 | ```
35 | 
36 | Alibaba
37 | ```html
38 | <script src="//g.alicdn.com/mtb/fix-ios12-array/1.0.9/index.js"></script>
39 | ```
40 | 
41 | ### npm package
42 | [array-reverse-polyfill](https://www.npmjs.com/package/array-reverse-polyfill)
43 | 
44 | ### Download releases
45 | [fanmingfei/array-reverse-ios12](https://github.com/fanmingfei/array-reverse-ios12/releases)
46 | 
47 | 
48 | ## UA sniffing
49 | 
50 | This polyfill use *[feature (bug 🙃) detection](https://en.wikipedia.org/wiki/Feature_detection_(web_development))* instead of *[UA sniffing](https://en.wikipedia.org/wiki/User_agent#User_agent_sniffing)*.
51 | 
52 | Some may want to load the polyfill in client-side or add the polyfill script in server-side only for Safari 12.0, and save the request to the polyfill for all other browsers. We assume the next version of iOS/Safari (12.1) will fix the bug, so we suggest you search "Version/12.0" and "Safari/" substring in user-agent string. You could also use regexp `/Version\/12\.0.*Safari\//`.
53 | 
54 | ### Client on-demand load
55 | ```html
56 | <head>
57 | <script>
58 | if (/Version\/12\.0.*Safari\//.test(navigator.userAgent))
59 |   loadScript('https://cdn.jsdelivr.net/npm/array-reverse-polyfill')
60 | // Assume you have `loadScript()` available to create and insert the script tag.
61 | </script>
62 | ...
63 | ```
64 | **NOTE**: The polyfill should be loaded and executed before all other scripts. So be careful about the `async` `defer` or `type=module`attributes and make sure your `loadScript()` implementation will keep the order.
65 | 
66 | ### Server-side adaption (use PHP as sample)
67 | ```php
68 | <head>
69 | <? if (preg_match('#Version/12\.0.*Safari/#', $_SERVER['HTTP_USER_AGENT'])): ?>
70 | <script src="https://cdn.jsdelivr.net/npm/array-reverse-polyfill"></script>
71 | <? endif; ?>
72 | ...
73 | ```
74 | 
75 | ## Test
76 | 
77 | Test page: [https://fanmingfei.github.io/array-reverse-ios12/origin.html](https://fanmingfei.github.io/array-reverse-ios12/origin.html)
78 | 
79 | 
80 | Test page with this polyfill: [https://fanmingfei.github.io/array-reverse-ios12/fixed.html](https://fanmingfei.github.io/array-reverse-ios12/fixed.html)
81 | 
82 | Clicking the button to test.
83 | 
84 | 
85 | For Unit Tests: [https://fanmingfei.github.io/array-reverse-ios12/tests/](https://fanmingfei.github.io/array-reverse-ios12/tests/)
86 | 
87 | 
88 | --------------------------------
89 | 
90 | ## Hope you guys luck
91 | 
92 | 


--------------------------------------------------------------------------------
/fixed.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
 7 |     <title>Fixed</title>
 8 |     <script src="./index.js"></script>
 9 | </head>
10 | 
11 | <body>
12 |     Use iOS12 test. <br/>
13 |     <button onclick="test()" style="border: 1px solid #ccc;">Click Test</button>
14 |     <script>
15 |         function test() {
16 |             var arr = [1, 2, 3, 4]
17 |             document.body.innerHTML += '<br/>'+arr.join(',')
18 |             arr.reverse()
19 |         }
20 |     </script>
21 |     <div>
22 |         <pre>
23 |         <code>
24 | Use iOS12 test. &lt;br/&gt;
25 | &lt;button onclick=&quot;test()&quot; style=&quot;border: 1px solid #ccc;&quot;&gt;Click Refresh&lt;/button&gt;
26 | &lt;script&gt;
27 |     function test() {
28 |         var arr = [1, 2, 3, 4]
29 |         document.body.innerHTML += &#x27;&lt;br/&gt;&#x27;+arr.join(&#x27;,&#x27;)
30 |         arr.reverse()
31 |     }
32 | &lt;/script&gt;
33 |         </code>
34 |       </pre>
35 |     </div>
36 | </body>
37 | 
38 | </html>


--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
 1 | (function() {
 2 |   function buggy() {
 3 |     var a = [1, 2];
 4 |     return String(a) === String(a.reverse());
 5 |   }
 6 |   if(!buggy()) return;
 7 |   var r = Array.prototype.reverse;
 8 |   Array.prototype.reverse = function reverse() {
 9 |     if (Array.isArray(this)) this.length = this.length;
10 |     return r.call(this);
11 |   }
12 | })();
13 | 


--------------------------------------------------------------------------------
/origin.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <title>Origin</title>
 7 | </head>
 8 | 
 9 | <body>
10 |     Use iOS12 test. <br/>
11 |     <button onclick="test()" style="border: 1px solid #ccc;">Click Test</button>
12 |     <script>
13 |         function test() {
14 |             var arr = [1, 2, 3, 4]
15 |             document.body.innerHTML += '<br/>'+arr.join(',')
16 |             arr.reverse()
17 |         }
18 |     </script>
19 |     <div>
20 |         <pre>
21 |         <code>
22 | Use iOS12 test. &lt;br/&gt;
23 | &lt;button onclick=&quot;test()&quot; style=&quot;border: 1px solid #ccc;&quot;&gt;Click Refresh&lt;/button&gt;
24 | &lt;script&gt;
25 |     function test() {
26 |         var arr = [1, 2, 3, 4]
27 |         document.body.innerHTML += &#x27;&lt;br/&gt;&#x27;+arr.join(&#x27;,&#x27;)
28 |         arr.reverse()
29 |     }
30 | &lt;/script&gt;
31 |         </code>
32 |       </pre>
33 |     </div>
34 | </body>
35 | 
36 | </html>


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "array-reverse-polyfill",
 3 |   "version": "1.0.9",
 4 |   "description": "Fix IOS 12 Array Reverse Bug.",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "test": "echo \"Error: no test specified\" && exit 1"
 8 |   },
 9 |   "repository": {
10 |     "type": "git",
11 |     "url": "git+https://github.com/fanmingfei/array-reverse-ios12.git"
12 |   },
13 |   "keywords": [
14 |     "ios12",
15 |     "array",
16 |     "reverse",
17 |     "bug"
18 |   ],
19 |   "author": "fanmingfei",
20 |   "license": "MIT",
21 |   "bugs": {
22 |     "url": "https://github.com/fanmingfei/array-reverse-ios12/issues"
23 |   },
24 |   "homepage": "https://github.com/fanmingfei/array-reverse-ios12#readme"
25 | }
26 | 


--------------------------------------------------------------------------------
/tests/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |   <meta charset="utf-8">
 5 |   <meta name="viewport" content="width=device-width">
 6 |   <title>Tests</title>
 7 |   <link rel="stylesheet" href="https://code.jquery.com/qunit/qunit-2.6.2.css">
 8 |   <script src="../index.js"></script>
 9 | </head>
10 | <body>
11 |   <div id="qunit"></div>
12 |   <div id="qunit-fixture"></div>
13 |   <script src="https://code.jquery.com/qunit/qunit-2.6.2.js"></script>
14 |   <script src="tests.js"></script>
15 | </body>
16 | </html>


--------------------------------------------------------------------------------
/tests/tests.js:
--------------------------------------------------------------------------------
 1 | // reference to the V8's test cases
 2 | // also see https://github.com/v8/v8/blob/master/test/mjsunit/array-reverse.js
 3 | 
 4 | QUnit.test('test primitive literal', function(assert) {
 5 |   assert.deepEqual([], [].reverse(), 'empty array');
 6 |   assert.deepEqual([8, 6, 4, 2], [2, 4, 6, 8].reverse(), 'array of int');
 7 |   assert.deepEqual(
 8 |     [0.8, 0.6, 0.4],
 9 |     [0.4, 0.6, 0.8].reverse(),
10 |     'array of double'
11 |   );
12 |   assert.deepEqual(
13 |     ['str4', 'str3', 'str2'],
14 |     ['str2', 'str3', 'str4'].reverse(),
15 |     'array of string'
16 |   );
17 | });
18 | 
19 | QUnit.test('test with undefined', function(assert) {
20 |   assert.deepEqual(
21 |     [undefined, undefined, null, 1],
22 |     [1, null, undefined, undefined].reverse()
23 |   );
24 | });
25 | 
26 | QUnit.test('test with array of Objects', function(assert) {
27 |   assert.deepEqual(
28 |     new Array(new Array(1), new Array(2), new Array()),
29 |     new Array(new Array(), new Array(2), new Array(1)).reverse()
30 |   );
31 |   assert.deepEqual(
32 |     new Array(new Object(), new Object(), new Object()),
33 |     new Array(new Object(), new Object(), new Object()).reverse()
34 |   );
35 |   assert.deepEqual(
36 |     new Array(new Object(1), new Object(0), new Object()),
37 |     new Array(new Object(), new Object(0), new Object(1)).reverse()
38 |   );
39 |   assert.deepEqual(
40 |     new Array(new Object('1'), new Object(0), Object.create(null)),
41 |     new Array(Object.create(null), new Object(0), new Object('1')).reverse()
42 |   );
43 |   assert.deepEqual(
44 |     new Array(new Number(1), new Number(2), new Number(3)),
45 |     new Array(new Number(3), new Number(2), new Number(1)).reverse()
46 |   );
47 |   assert.deepEqual(
48 |     new Array(new Boolean(false), new Boolean(true)),
49 |     new Array(new Boolean(true), new Boolean(false)).reverse()
50 |   );
51 | });
52 | 
53 | QUnit.test('test with Object', function(assert) {
54 |   let obj = { length: 5 };
55 |   obj[0] = 'foo';
56 |   obj[3] = 'bar';
57 |   Array.prototype.reverse.call(obj);
58 | 
59 |   assert.deepEqual({ '1': 'bar', '4': 'foo', length: 5 }, obj);
60 | });
61 | 
62 | QUnit.test('test with prototype chain', function(assert) {
63 |   let proto = { 0: 'foo', 19: 'bar' };
64 |   let obj = { length: 20, 5: 'foobar', __proto__: proto };
65 |   Array.prototype.reverse.call(obj);
66 | 
67 |   assert.equal('bar', obj[0]);
68 |   assert.equal('foobar', obj[14]);
69 |   assert.equal('foo', obj[19]);
70 | });
71 | 


--------------------------------------------------------------------------------