React-ace: Editor tidak berfungsi di Safari jika tinggi atau lebar adalah persentase

Dibuat pada 12 Jul 2017 · 13Komentar · Sumber: securingsincity/react-ace

Masalah

Editor berfungsi dengan baik di Chrome, tetapi tidak ditampilkan dengan benar di Safari. Melihat markup yang dihasilkan, itu bahkan tidak dirender dengan cara yang sama.

Inilah tampilan HTML untuk talang di 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>

Berikut HTML yang sama untuk talang di 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>

Ini membuatnya jauh lebih sulit untuk diuji saat menggunakan untuk aksesibilitas di Mac karena VoiceOver hanya berfungsi dengan baik dengan Safari, dan VoiceOver adalah pembaca layar utama untuk Mac.

Kode contoh untuk mereproduksi masalah Anda

Tidak perlu sampel kode khusus, cukup muat demo di Chrome dan Safari (http://securingsincity.github.io/react-ace/)

bug help wanted issue with ace

Sumber

backwardok

Semua 13 komentar

@backwardok Saya dapat mereproduksi tetapi saya tidak yakin apa penyebabnya. Ini mungkin masalah dengan Perpustakaan Ace itu sendiri. Saya akan menyelidiki lebih lanjut.

securingsincity pada 18 Jul 2017

Menariknya @backwardok , editor terbagi bekerja http://securingsincity.github.io/react-ace/split.html jadi saya bertanya-tanya apakah ini masalah dengan salah satu konfigurasi demo.

securingsincity pada 18 Jul 2017

Jadi setelah melakukan beberapa debugging, contoh editor berfungsi dengan baik tanpa height="100%" yang menarik untuk sedikitnya ... Saya akan menghapus itu dari contoh untuk saat ini. Tidak yakin apa masalahnya sebenarnya di sini, mungkin terkait Ace

securingsincity pada 19 Jul 2017

Aneh! Semoga solusi itu memecahkan masalah yang kami lihat dalam penggunaannya juga. Terima kasih telah memeriksanya!

backwardok pada 19 Jul 2017

@backwardok tidak masalah. Hanya karena saya penasaran, proyek macam apa yang Anda gunakan untuk react-ace?

securingsincity pada 19 Jul 2017

@securingsincity kami menggunakannya untuk taman bermain di dalam buku cerita untuk memungkinkan pengembang bermain-main dengan berbagai komponen react yang ada di dalam perpustakaan kami.

backwardok pada 19 Jul 2017

Mengubah judul karena ini tampaknya menjadi masalah khusus untuk ace dan menyetel tinggi dan lebar menjadi persentase.

securingsincity pada 3 Agu 2017

Tampaknya berfungsi dengan ace di Safari dan Chrome. Atau apakah saya melakukan sesuatu yang salah?
Membuktikan

dmigo pada 6 Agu 2017

@dmigo Ini tidak menggunakan komponen React? hanya ace.js ?

kavink pada 20 Des 2017

Tidak yakin apakah contoh berubah sejak saya membuat ini, tetapi sepertinya contoh tersebut berfungsi di Safari?

backwardok pada 20 Des 2017

@backwardok Apa yang tidak bekerja untuk saya adalah komponen react, "lebar" tidak mengambil persentase, hanya membutuhkan misalnya "500px".
Saya belum tahu bagaimana menskalakan dan menyesuaikan dengan wadah.

kavink pada 20 Des 2017

😕4

react-ace sepertinya masih belum bisa mengambil persentase untuk lebar atau tinggi.

connorwaslo pada 3 Jun 2018

Saat ini, react-ace masih tidak akan dirender jika ada rasa '%' yang dimasukkan ke dalam width atau height, dan tidak akan diskalakan agar sesuai dengan induknya dengan benar.
Sunting: Namun, saya bisa membuatnya bekerja dengan baik dengan mengatur tinggi dan lebar ke "auto", dan kemudian membuat orang tua memaksa sebuah flex.