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

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

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

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

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

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

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

وعند إيقافه (حتى في بيئة محلية 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 إعجابات