React-ace: El editor no funciona en Safari cuando la altura o el ancho es un porcentaje

Creado en 12 jul. 2017 · 13Comentarios · Fuente: securingsincity/react-ace

Problema

El editor funciona bien en Chrome, pero no se muestra correctamente en Safari. Mirando el marcado resultante, ni siquiera se renderiza de la misma manera.

Así es como se ve el HTML para el canalón en Safari:

<div class="ace_gutter">
  <div class="ace_layer ace_gutter-layer ace_folding-enabled" style="margin-top: -5px; height: 52px; width: 42px;">
    <div class="ace_gutter-cell " style="height: 19px;">3</div>
  </div>
  <div class="ace_gutter-active-line" style="top: -5px; height: 19px;"></div>
</div>

Este es el mismo HTML para el canalón en Chrome:

<div class="ace_gutter">
  <div class="ace_layer ace_gutter-layer ace_folding-enabled" style="margin-top: 0px; height: 585px; width: 42px;">
    <div class="ace_gutter-cell " style="height: 19px;">1<span class="ace_fold-widget ace_start ace_open" style="height: 19px;"></span></div>
    <div class="ace_gutter-cell " style="height: 19px;">2</div>
    <div class="ace_gutter-cell " style="height: 19px;">3</div>
  </div>
  <div class="ace_gutter-active-line" style="top: 38px; height: 19px;"></div>
</div>

Esto hace que sea mucho más difícil de probar cuando se usa para la accesibilidad en una Mac, ya que VoiceOver solo funciona correctamente con Safari, y VoiceOver es el lector de pantalla principal para una Mac.

Código de muestra para reproducir su problema

No se necesita una muestra de código especial, solo cargue la demostración tanto en Chrome como en Safari (http://securingsincity.github.io/react-ace/)

bug help wanted issue with ace

Fuente

backwardok

Todos 13 comentarios

@backwardok Puedo reproducir pero no estoy seguro de cuál es la causa. Esto podría ser un problema con la propia biblioteca Ace. Investigaré más.

securingsincity en 18 jul. 2017

Curiosamente @backwardok, el editor dividido funciona http://securingsincity.github.io/react-ace/split.html, así que me pregunto si esto es un problema con una de las configuraciones de la demostración.

securingsincity en 18 jul. 2017

Entonces, después de hacer un poco de depuración, el ejemplo del editor funciona bien sin height="100%" cual es interesante por decir lo menos ... Voy a eliminar eso del ejemplo por ahora. No estoy seguro de cuál es realmente el problema aquí, podría estar relacionado con Ace

securingsincity en 19 jul. 2017

¡Extraño! Con suerte, esa solución también resuelve el problema que estamos viendo en nuestro uso. ¡Gracias por investigar eso!

backwardok en 19 jul. 2017

@backwardok no hay problema. Solo porque tengo curiosidad, ¿en qué tipo de proyecto estás usando react-ace?

securingsincity en 19 jul. 2017

@securingsincity lo estamos usando como un patio de juegos dentro del libro de

backwardok en 19 jul. 2017

Cambiar el título ya que parece ser un problema exclusivo de as y establecer la altura y el ancho en un porcentaje.

securingsincity en 3 ago. 2017

Parece estar funcionando con ace en Safari y Chrome. ¿O estoy haciendo algo mal?
Probar

dmigo en 6 ago. 2017

@dmigo ¿ No está usando el componente React? solo ace.js ?

kavink en 20 dic. 2017

No estoy seguro de si el ejemplo cambió desde que creé esto, pero parece que el ejemplo funciona en Safari.

backwardok en 20 dic. 2017

@backwardok Lo que no me funciona es el componente de reacción, "ancho" no toma porcentaje, solo toma, por ejemplo, "500px".
No he descubierto cómo escalar y ajustar al contenedor.

kavink en 20 dic. 2017

😕4

react-ace todavía parece no ser capaz de tomar un porcentaje de ancho o alto.

connorwaslo en 3 jun. 2018

A partir de hoy, react-ace aún no se procesará si se pone cualquier sabor de '%' en width o height, y no se escalará para adaptarse correctamente al padre.
Editar: Sin embargo, pude hacer que funcionara correctamente estableciendo la altura y el ancho en "auto", y luego haciendo que el padre fuerza una flexión.