React-ace: O editor não funciona no Safari quando a altura ou largura é uma porcentagem

Criado em 12 jul. 2017 · 13Comentários · Fonte: securingsincity/react-ace

Problema

O editor funciona bem no Chrome, mas não é renderizado corretamente no Safari. Olhando para a marcação resultante, ela nem mesmo renderiza da mesma maneira.

Esta é a aparência do HTML para a sarjeta no 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 é o mesmo HTML para a sarjeta no 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>

Isso torna muito mais difícil testar ao usar para acessibilidade em um Mac, pois o VoiceOver só funciona corretamente com o Safari, e o VoiceOver é o leitor de tela principal para um Mac.

Código de amostra para reproduzir o seu problema

Nenhuma amostra de código especial é necessária, basta carregar a demonstração no Chrome e no Safari (http://securingsincity.github.io/react-ace/)

bug help wanted issue with ace

Fonte

backwardok

Todos 13 comentários

@backwardok Consigo reproduzir, mas não tenho certeza de qual é a causa. Isso pode ser um problema com a própria Biblioteca Ace. Vou investigar mais.

securingsincity em 18 jul. 2017

Curiosamente, @backwardok, o editor dividido funciona http://securingsincity.github.io/react-ace/split.html, então eu me pergunto se isso é um problema com uma das configurações do demo.

securingsincity em 18 jul. 2017

Então, depois de fazer alguma depuração, o exemplo do editor funciona bem sem o height="100%" que é interessante para dizer o mínimo ... Vou remover isso do exemplo por enquanto. Não tenho certeza de qual é o problema aqui, pode estar relacionado ao Ace

securingsincity em 19 jul. 2017

Esquisito! Esperançosamente, essa solução alternativa resolve o problema que estamos vendo em nosso uso dele também. Obrigado por investigar isso!

backwardok em 19 jul. 2017

@backwardok sem problemas. Só porque estou curioso, em que tipo de projeto você está usando o react-ace?

securingsincity em 19 jul. 2017

@securingsincity estamos usando como um playground dentro do storybook para permitir que os desenvolvedores brinquem com os diferentes componentes de reação que existem em nossa biblioteca.

backwardok em 19 jul. 2017

Alterar o título, pois parece ser um problema exclusivo do Ace e definir a altura e largura como uma porcentagem.

securingsincity em 3 ago. 2017

Parece estar funcionando com o ace no Safari e no Chrome. Ou estou fazendo algo errado?
Provar

dmigo em 6 ago. 2017

@dmigo Não está usando o componente React? apenas ace.js ?

kavink em 20 dez. 2017

Não tenho certeza se o exemplo mudou desde que criei isso, mas parece que o exemplo está funcionando no Safari?

backwardok em 20 dez. 2017

@backwardok O que não está funcionando para mim é o componente de reação, “largura” não leva porcentagem, apenas leva, por exemplo, “500px”.
Eu não descobri como dimensionar e ajustar ao contêiner.

kavink em 20 dez. 2017

😕4

react-ace ainda parece não ser capaz de tirar uma porcentagem de largura ou altura.

connorwaslo em 3 jun. 2018

A partir de hoje, o react-ace ainda não será processado se qualquer variação de '%' for colocado em largura ou altura, e não será dimensionado para se ajustar ao pai corretamente.
Edit: No entanto, consegui fazê-lo funcionar corretamente definindo a altura e a largura como "auto" e, em seguida, fazendo a força pai flexionar.