El estado de la matriz se almacenará en caché en iOS 12 Safari. ¿Es un error o una característica?

432

Actualización a 2018.10.31

Este error se ha solucionado en iOS 12.1, tenga un buen día ~

Encontré un problema con el estado del valor de Array en el Safari iOS 12 recién lanzado, por ejemplo, un código como este:

<!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>

Después de actualizar la página, el valor de la matriz aún se invierte. ¿Es esto un error o una característica del nuevo Safari?

Aquí hay una página de demostración. Intenta usarlo con iOS 12 Safari: https://abelyao.github.io/others/ios12-safari-bug.html

— abelyao
fuente

41

Error confirmado también en macOS 10.14 Mojave - i.imgur.com/ZJtJJC1.png

— a_rahmanshah

43

macOS 10.13.6 (High Sierra) con Safari versión 12.0 (13606.2.11) tiene el mismo problema. La matriz todavía se invierte después de actualizar la página.

— Kevin Gimbel

2

El error se ha corregido en Safari 12.0.1 (macOS), así como en iOS 12.1.

— MrMister

272

Definitivamente es un error! Y es un error muy grave.

El error se debe a la optimización de los inicializadores de matriz en los que todos los valores son literales primitivos. Por ejemplo, dada la función:

function buildArray() {
    return [1, null, 'x'];
}

Todas las referencias de matriz devueltas de las llamadas a buildArray()se vincularán a la misma memoria, y algunos métodos como toString()tendrán sus resultados en caché. Normalmente, para preservar la coherencia, cualquier operación mutable en dichos arreglos optimizados copiará los datos en un espacio de memoria separado y se vinculará a ellos; Este patrón se llama copy-on-write o CoW para abreviar.

El reverse()método muta la matriz, por lo que debería desencadenar una copia en escritura. Pero no es así, porque el implementador original (Keith Miller de Apple) perdió el reverse()caso, a pesar de que había escrito muchos casos de prueba.

Este error se informó a Apple el 21 de agosto. La solución aterrizó en el repositorio de WebKit el 27 de agosto y se envió a Safari 12.0.1 y iOS 12.1 el 30 de octubre de 2018.

— hax
fuente

11

Nota: Safari 12.0 en Mac OS X también tiene el mismo problema.

— hax

17

Sí, ya se ha solucionado en las fuentes y ya se envió en Safari Technology Preview. Pruebe cdn.miss.cat/demo/ios12-safari-bug.html en Safari Technology Preview 65. Verá que no tiene el error.

— sidehowbarker

66

No creo que la causa subyacente del error sea el resultado de una confusión de índices; en cambio, parece ser causado por no verificar si un objeto es inmutable antes de modificarlo. El problema de corte puede tener una explicación similar, pero no es lo mismo, pero no se solucionará con el parche para revertir, por lo que puedo decir. Debería considerar abrir un informe de error de WebKit para el problema del segmento.

— Zenexer

55

@ Zenexer Tienes razón. Escribí esta respuesta antes de encontrar bugs.webkit.org/show_bug.cgi?id=188794 y ver el código fuente. Editaré mi respuesta.

— hax

75

Escribí una lib para corregir el error. https://www.npmjs.com/package/array-reverse-polyfill

Este es el código :

(function() {
  function buggy() {
    var a = [1, 2];
    return String(a) === String(a.reverse());
  }
  if(!buggy()) return;
  var r = Array.prototype.reverse;
  Array.prototype.reverse = function reverse() {
    if (Array.isArray(this)) this.length = this.length;
    return r.call(this);
  }
})();

Expandir fragmento

— Edire Fan
fuente

44

Actualiza en cualquier momento. Bienvenido a contribuir.

— Edire Fan el

14

@zephi, supongo que escribir en length ( this.length = this.length) activará Copy On Write, por lo que cambiará la dirección de memoria de la matriz y solucionará el comportamiento de reverse.

— Cœur

14

Este es un error en el kit web . Aunque esto se resolvió al final, pero aún no se envió con el lanzamiento de iOS GM. Una de las soluciones a este problema:

(function() {
  function getReverseStr() {
    return [1, 2].reverse();
  }

  var n1 = getReverseStr()[0];
  var n2 = getReverseStr()[0];
  // check if there is an issue
  if(n1 != n2) {
    var origReverseFunction = Array.prototype.reverse;
    Array.prototype.reverse = function() {
      var newArr = this.slice();
      // use original reverse function so that edge cases are taken care of
      origReverseFunction.apply(newArr, arguments);
      var that = this;
      // copy reversed array
      newArr.forEach(function(value, index) {
        that[index] = value;
      });
      return this;
    }
  }
})();

— jsist
fuente

6

Parece que no se almacena en caché si cambia el número de elementos.
Pude evitar esto así.

<!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];
        arr.push('');
        arr.pop();
        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>

Expandir fragmento

— Atsushi Sasaki
fuente