React-ace: Der Editor funktioniert in Safari nicht, wenn Höhe oder Breite ein Prozentsatz sind

Erstellt am 12. Juli 2017 · 13Kommentare · Quelle: securingsincity/react-ace

Problem

Der Editor funktioniert in Chrome einwandfrei, wird jedoch in Safari nicht ordnungsgemäß gerendert. Wenn man sich das resultierende Markup ansieht, wird es nicht einmal auf die gleiche Weise gerendert.

So sieht der HTML-Code für die Dachrinne in Safari aus:

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

Hier ist derselbe HTML-Code für die Dachrinne in 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>

Dies erschwert das Testen bei Verwendung für die Barrierefreiheit auf einem Mac erheblich, da VoiceOver nur mit Safari ordnungsgemäß funktioniert und VoiceOver der Hauptbildschirmleser für einen Mac ist.

Beispielcode zur Reproduktion Ihres Problems

Es ist kein spezielles Codebeispiel erforderlich. Laden Sie einfach die Demo in Chrome und Safari (http://securingsincity.github.io/react-ace/).

bug help wanted issue with ace

Quelle

backwardok

Alle 13 Kommentare

@backwardok Ich kann reproduzieren, bin mir aber nicht sicher, was die Ursache ist. Dies kann ein Problem mit der Ace Library selbst sein. Ich werde weiter untersuchen.

securingsincity am 18. Juli 2017

Interessanterweise @backwardok funktioniert der Split-Editor http://securingsincity.github.io/react-ace/split.html, daher frage ich mich, ob dies ein Problem mit einer der Konfigurationen der Demo ist.

securingsincity am 18. Juli 2017

Nach einigem Debuggen funktioniert das Editor-Beispiel ohne height="100%" was gelinde gesagt interessant ist ... Ich werde das vorerst aus dem Beispiel entfernen. Ich bin mir nicht sicher, was das Problem hier wirklich ist, könnte mit Ace zusammenhängen

securingsincity am 19. Juli 2017

Seltsam! Hoffentlich löst diese Problemumgehung das Problem, das wir auch bei der Verwendung sehen. Danke, dass du dir das angeschaut hast!

backwardok am 19. Juli 2017

@backwardok kein Problem. Nur weil ich neugierig bin, in was für einem Projekt setzen Sie React-Ace ein?

securingsincity am 19. Juli 2017

@securingsincity Wir verwenden es für einen Spielplatz im Storybook , damit Entwickler mit verschiedenen Reaktionskomponenten in unserer Bibliothek herumspielen können .

backwardok am 19. Juli 2017

Das Ändern des Titels als ein Problem, das nur bei Ass auftritt, und das Festlegen von Höhe und Breite als Prozentsatz.

securingsincity am 3. Aug. 2017

Es scheint mit Ass in Safari und Chrome zu funktionieren. Oder mache ich etwas falsch?
Beweisen

dmigo am 6. Aug. 2017

@dmigo Wird die React-Komponente nicht verwendet? nur ace.js ?

kavink am 20. Dez. 2017

Sie sind sich nicht sicher, ob sich das Beispiel geändert hat, seit ich es erstellt habe, aber es scheint, dass das Beispiel in Safari funktioniert?

backwardok am 20. Dez. 2017

@backwardok Was für mich nicht funktioniert, ist die Reaktionskomponente, "width" nimmt keinen Prozentsatz an, sondern nur "500px".
Ich habe nicht herausgefunden, wie ich skalieren und an den Container anpassen soll.

kavink am 20. Dez. 2017

😕4

React-Ace scheint immer noch nicht in der Lage zu sein, einen Prozentsatz für Breite oder Höhe zu ermitteln.

connorwaslo am 3. Juni 2018

Bis heute wird React-Ace immer noch nicht gerendert, wenn ein Geschmack von '%' in Breite oder Höhe gebracht wird, und wird nicht skaliert, um dem Elternteil richtig zu passen.
Bearbeiten: Ich konnte es jedoch richtig zum Laufen bringen, indem ich Höhe und Breite auf "Auto" stellte und dann die übergeordnete Kraft zu einem Flex machte.

confiant-mfb am 6. Aug. 2019

👀2

War diese Seite hilfreich?

0 / 5 - 0 Bewertungen

React-ace: Der Editor funktioniert in Safari nicht, wenn Höhe oder Breite ein Prozentsatz sind

Problem

Beispielcode zur Reproduktion Ihres Problems

Alle 13 Kommentare

Verwandte Themen