React-ace: لا يعمل المحرر في Safari عندما يكون الارتفاع أو العرض نسبة مئوية

تم إنشاؤها على ١٢ يوليو ٢٠١٧ · 13تعليقات · مصدر: securingsincity/react-ace

مشكلة

يعمل المحرر بشكل جيد في Chrome ، ولكنه لا يتم عرضه بشكل صحيح في Safari. بالنظر إلى الترميز الناتج ، فإنه لا يعرض بنفس الطريقة.

إليك ما يبدو عليه HTML الخاص بالحضيض في 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>

إليك نفس HTML الخاص بالحضيض في 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>

هذا يجعل الأمر أكثر صعوبة للاختبار عند استخدام إمكانية الوصول على جهاز Mac نظرًا لأن VoiceOver يعمل بشكل صحيح فقط مع Safari ، و VoiceOver هو قارئ الشاشة الرئيسي لجهاز Mac.

عينة رمز لإعادة إنتاج مشكلتك

لا يلزم وجود نموذج رمز خاص ، ما عليك سوى تحميل العرض التوضيحي في كل من Chrome و Safari (http://securingsincity.github.io/react-ace/)

bug help wanted issue with ace

مصدر

backwardok

ال 13 كومينتر

backwardok أنا قادر على التكاثر لكني لست متأكدًا من السبب. قد تكون هذه مشكلة في مكتبة Ace نفسها. سأحقق أكثر.

securingsincity في ١٨ يوليو ٢٠١٧

من المثير للاهتمام backwardok أن محرر التقسيم يعمل http://securingsincity.github.io/react-ace/split.html لذلك أتساءل عما إذا كانت هذه مشكلة في أحد تكوينات العرض التوضيحي.

securingsincity في ١٨ يوليو ٢٠١٧

لذلك بعد إجراء بعض التصحيح ، يعمل مثال المحرر بشكل جيد بدون height="100%" وهو أمر مثير للاهتمام على أقل تقدير ... سأقوم بإزالته من المثال في الوقت الحالي. لست متأكدًا من المشكلة الحقيقية هنا ، فقد تكون متعلقة بـ Ace

securingsincity في ١٩ يوليو ٢٠١٧

عجيب! نأمل أن يعمل هذا الحل على حل المشكلة التي نراها في استخدامنا لها أيضًا. شكرا للنظر في ذلك!

backwardok في ١٩ يوليو ٢٠١٧

backwardok لا مشكلة. فقط لأنني فضولي ، ما نوع المشروع الذي تستخدمه في رد الفعل؟

securingsincity في ١٩ يوليو ٢٠١٧

securingsincity نحن نستخدمه لملعب داخل Storybook للسماح للمطورين بالتلاعب بمكونات تفاعل مختلفة موجودة داخل مكتبتنا.

backwardok في ١٩ يوليو ٢٠١٧

تغيير العنوان حيث يبدو أن هذه مشكلة فريدة من نوعها بالنسبة لـ ace وتعيين الارتفاع والعرض ليكونا نسبة مئوية.

securingsincity في ٣ أغسطس ٢٠١٧

يبدو أنه يعمل مع ace في Safari و Chrome. أم أنني أفعل شيئًا خاطئًا؟
إثبات

dmigo في ٦ أغسطس ٢٠١٧

dmigo ألا تستخدم مكون ace.js ؟

kavink في ٢٠ ديسمبر ٢٠١٧

ألست متأكدًا مما إذا كان المثال قد تغير منذ أن قمت بإنشاء هذا ، ولكن يبدو أن المثال يعمل في Safari؟

backwardok في ٢٠ ديسمبر ٢٠١٧

backwardok ما لا يعمل بالنسبة لي هو مكون التفاعل ، "العرض" لا يأخذ النسبة المئوية ، فقط يأخذ على سبيل المثال "500 بكسل".
لم أحسب كيفية القياس والملاءمة للحاوية.

kavink في ٢٠ ديسمبر ٢٠١٧

😕4

رد الفعل لا يزال يبدو أنه غير قادر على أخذ نسبة مئوية للعرض أو الارتفاع.

connorwaslo في ٣ يونيو ٢٠١٨

اعتبارًا من اليوم ، لن يتم عرض رد فعل الآس إذا تم وضع أي نكهة من "٪" في العرض أو الارتفاع ، ولن تتسع لتناسب الأصل بشكل صحيح.
تحرير: ومع ذلك ، تمكنت من جعله يعمل بشكل صحيح عن طريق ضبط الارتفاع والعرض على "تلقائي" ، ثم جعل القوة الأم مرنة.