React-ace: L'éditeur ne fonctionne pas dans Safari lorsque la hauteur ou la largeur est un pourcentage

Créé le 12 juil. 2017 · 13Commentaires · Source: securingsincity/react-ace

Problème

L'éditeur fonctionne correctement dans Chrome, mais ne s'affiche pas correctement dans Safari. En regardant le balisage résultant, il ne rend même pas de la même manière.

Voici à quoi ressemble le code HTML de la gouttière dans 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>

Voici le même code HTML pour la gouttière dans 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>

Cela rend les tests beaucoup plus difficiles lors de l'utilisation pour l'accessibilité sur un Mac, car VoiceOver ne fonctionne correctement qu'avec Safari et VoiceOver est le lecteur d'écran principal pour un Mac.

Exemple de code pour reproduire votre problème

Aucun exemple de code spécial nécessaire, il suffit de charger la démo dans Chrome et Safari (http://securingsincity.github.io/react-ace/)

bug help wanted issue with ace

Source

backwardok

Tous les 13 commentaires

@backwardok Je suis capable de reproduire mais je ne suis pas sûr de la cause. Cela pourrait être un problème avec la bibliothèque Ace elle-même. Je vais enquêter plus loin.

securingsincity le 18 juil. 2017

Il est intéressant de noter que http://securingsincity.github.io/react-ace/split.html, donc je me demande si c'est un problème avec l'une des configurations de la démo.

securingsincity le 18 juil. 2017

Donc, après avoir débogué, l'exemple d'éditeur fonctionne bien sans le height="100%" ce qui est pour le moins intéressant ... Je vais supprimer cela de l'exemple pour le moment. Je ne sais pas quel est vraiment le problème ici, cela pourrait être lié à Ace

securingsincity le 19 juil. 2017

Bizarre! Espérons que cette solution résoudra également le problème que nous voyons dans notre utilisation. Merci d'avoir examiné cela!

backwardok le 19 juil. 2017

@backwardok pas de problème. Juste parce que je suis curieux, dans quel genre de projet utilisez-vous react-ace?

securingsincity le 19 juil. 2017

@securingsincity, nous l'utilisons pour un terrain de jeu dans un livre d'

backwardok le 19 juil. 2017

Changer le titre car cela semble être un problème unique à ace et définir la hauteur et la largeur en pourcentage.

securingsincity le 3 août 2017

Il semble fonctionner avec ace dans Safari et Chrome. Ou est-ce que je fais quelque chose de mal?
Prouver

dmigo le 6 août 2017

@dmigo Il n'utilise pas le composant React? juste ace.js ?

kavink le 20 déc. 2017

Vous ne savez pas si l'exemple a changé depuis que j'ai créé ceci, mais il semble que l'exemple fonctionne dans Safari?

backwardok le 20 déc. 2017

@backwardok Ce qui ne fonctionne pas pour moi, c'est le composant de réaction, «width» ne prend pas de pourcentage, prend juste par exemple «500px».
Je n'ai pas compris comment mettre à l'échelle et s'adapter au conteneur.

kavink le 20 déc. 2017

😕4

react-ace semble toujours incapable de prendre un pourcentage pour la largeur ou la hauteur.

connorwaslo le 3 juin 2018

À partir d'aujourd'hui, react-ace ne sera toujours pas rendu si une saveur de '%' est mise en largeur ou en hauteur, et ne sera pas mise à l'échelle pour s'adapter correctement au parent.
Edit: Cependant, j'ai pu le faire fonctionner correctement en définissant la hauteur et la largeur sur "auto", puis en faisant en sorte que le parent force un flex.