بطاقة المستخدم لن تفتح على الهاتف المحمول

ساهم خلل
1

بعد التحديث إلى الإصدار 2.6.0.beta6 (3e1b94c227)، لم يعد كارت المستخدم يفتح على الهاتف المحمول. قمت باختبار الأمر في موقع meta ولم أواجه أي مشكلة. ربما تكون هذه المشكلة ناتجة عن أن منصة discourse الخاصة بنا تدعم الاتجاه من اليمين إلى اليسار (RTL).

لا نواجه أي مشكلة على سطح المكتب، لكن على الهاتف المحمول، عند النقر على صورة المستخدم لا يفتح الكارت، بل عند النقر مرة أخرى ندخل إلى الملف الشخصي.

لا توجد سجلات أخطاء…

لقد أجريت الاختبار باستخدام قالب افتراضي دون أي مكونات إضافية.

نحن نستخدم الإضافات التالية:

3 إعجابات
2

لا يمكنني رؤية الفئات التالية في الاتجاه من اليمين إلى اليسار (RTL):

هل يمكن أن يكون هذا الملف غير مُجمَّع؟ لأننا قمنا بالتحديث عبر واجهة الويب.

4

غير مرجح، لكنه ممكن. هل يمكنك إعادة البناء عبر وحدة التحكم؟

إعجاب واحد (1)
5

بالتأكيد، كنا نخطط للقيام بذلك غدًا. منذ أمس، قمنا بإضافة الأكواد ذات الصلة مؤقتًا إلى القالب لحل المشكلة.

6

أستطيع إعادة إنتاج هذه المشكلة. يبدو أنها خطأ في R2.

عند تمرير خيار :rtl إلى المجمع، يتم تمرير CSS عبر R2، الذي يقوم بإجراء تعديلات RTL السحرية.

هذا يعمل بشكل رائع، لكن لسبب ما، يبدو أننا نواجه حالة حافة حيث يعيد CSS مشوشًا. نستخدم نمطًا لإنشاء تأثير التلاشي لقوائم التنقل على الجوال، ويبدو كالتالي.

هذا ليس المكان الوحيد الذي نستخدم فيه هذا النمط؛ إنه مجرد مثال.

يبدو أن هذا النمط يتجاوز قدرة R2 على معالجته. نحن نستدعي دالة RGBA وتمرير متغير CSS إليها، ثم نضيف نقطة توقف أيضًا.

عند تمرير هذا عبر R2، يعيد شيئًا مثل هذا.

jumbled CSS
jumbled CSS1101×786 278 KB

وعند إيقافه (حتى في بيئة محلية RTL)، نحصل على هذا:

correct css

الـ CSS المشوش يُربك المجمع ويسبب له ضغط أي CSS يأتي بعد هذه القاعدة إلى كود غير مفيد لا يتم تطبيقه أبدًا.

لذلك، هناك عدة أوراق أنماط بعد هذه الورقة لا يتم تحميلها أبدًا على الجوال في وضع RTL. ورقة أنماط بطاقة المستخدم هي واحدة منها.

حاولت تقليل تعقيد هذا النمط بإزالة نقاط التوقف، ويبدو أن هذا يعمل. لذا ننتقل من هذا:

background: linear-gradient(
  to right,
  rgba(var(--secondary-rgb), 0) 0%,
  rgba(var(--secondary-rgb), 1) 100%
);

إلى هذا:

background: linear-gradient(
  to right,
  rgba(var(--secondary-rgb), 0),
  rgba(var(--secondary-rgb), 1)
);

هذا لن يسبب أي تغييرات بصرية - لأن نقاط التوقف هذه هي الافتراضية على أي حال - وسيحل المشكلة.

لقد أرسلت طلب سحب (PR) لتحديث هذا النمط في كل مكان نستخدمه فيه هنا.

شكرًا لتقريرك عن المشكلة @nildarar :+1:

7 إعجابات
7

واو، كان وصفك شاملاً ومفيدًا للغاية، وكان الخطأ غريبًا!

لقد شاهدنا بعض الأخطاء التي ذكرتها أعلاه من قبل، لكننا حاولنا إخفاءها عن طريق تجاوز تنسيقات CSS.

شكرًا لك على حل هذه المشكلة بصبر ودقة، وشكرًا لك على الشرح الكامل الذي كتبته :pray: :slightly_smiling_face:

4 إعجابات