لدينا العديد من المستخدمين الذين يستخدمون أجهزة Apple و/أو متصفحات تعتمد على webkit يبلغون عن مشكلة عند التمرير عبر المواضيع لدرجة أن المنتدى يصبح غير قابل للاستخدام.
بعد إجراء بعض البحث، يبدو أن السبب الأكثر احتمالاً هو كيفية تعامل webkit مع تغيير حجم الصور، كيف يمكنني قول ذلك بلطف… سيء.
ومع ذلك، أدى ذلك أيضًا إلى ملاحظة كيفية عرض الرموز التعبيرية في HTML المطبوخ وأود بعض التوضيح لأنه ربما فاتني بعض الإعدادات التي كان بإمكاني القيام بها ومنعت ذلك.
باللون الأخضر يمكنك رؤية الحجم الأصلي للرمز التعبيري.
باللون الأزرق السماوي/السماوي/أياً كان، السمات الافتراضية التي أضافها Discourse عند طهي المحتوى.
باللون الأحمر CSS المضاف بواسطة المكون الإضافي الذي كتبته والذي:
يستورد الرموز التعبيرية (وهي كثيرة جدًا)
يضيف بعض CSS المخصص لجعلها تعرض بشكل صحيح لأنها ليست كلها “20 × 20”
الآن قمت بإجراء اختبار بسيط. قمت بإزالة width="20" height="20" من حقل cooked في قاعدة البيانات لهذا الموضوع، وطلبت من المستخدمين المحاولة مرة أخرى وتصور الموضوع، والتمرير، والرد حتى لو كان شخص ما يضيف منشورات جديدة ولكن دون استخدام الرموز التعبيرية حتى لا يتم حقن هذين السمتين مرة أخرى في HTML المعروض للرموز التعبيرية.
يبدو أن هذا هو ما يسبب المشاكل على webkit حيث تؤكد جميع التقارير التي لدي أنه بمجرد إزالة هذين السمتين، لا توجد مشكلة في التمرير.
إذًا، هل هناك طريقة لمنع Discourse من إضافة هذه المعلمات؟ لماذا يفترض Discourse أن كل رمز تعبيري سيكون “20 × 20” ، وفوق ذلك، يفرضه عبر سمة HTML بدلاً من استخدام CSS؟
تمكنت من إعادة إنتاج المشكلة على جهاز iPad الخاص بي ولكن ليس على متصفح Chrome على سطح المكتب.
أقوم بالتمرير للأعلى، ويعود المخطط الزمني إلى المنشور السابق، مما يجعل من الصعب التمرير وتجاوزه والذهاب أبعد في المخطط الزمني.
لكنني أواجه صعوبة في إعادة إنتاج المشكلة باستمرار. لقد علقت عند المنشور رقم 1955، ولكن بعد أن تمكنت من التمرير فوقه، إذا عدت للأسفل وقمت بالتمرير للأعلى مرة أخرى، فلن يمنعني ذلك بعد الآن
السبب هو أن هذا يحدث في كل مرة يتم فيها “تحميل كسول” لإيموجي جديد ويتم عرض سمات الحجم.
بمجرد عرضه، لا تحدث المشكلة. ولكن إذا مررت عبر موضوع به العديد من الردود ويتم استخدام الإيموجي فيه بشكل كبير، فسترى باستمرار أن هذا السلوك يحدث وسيؤدي إلى استحالة استخدام Discourse.
تمكنا من “إصلاحه” في السمة المخصصة الخاصة بنا، ولكن أعتقد أنه يجب معالجة هذا في السمة الافتراضية أيضًا، أو بشكل أفضل، في الوظيفة التي تعالج المنشورات حيث لا أرى سببًا لتطبيق سمات HTML المتعلقة بالحجم بدلاً من استخدام CSS بسيط.
سأضيف أن كل متصفح لنظام iOS يبدو أنه يستخدم webkit، لذا ستكون هذه مشكلة في الغالب للأجهزة التي تعمل بنظام Apple. لست خبيرًا في هذا الأمر، لذا خذ هذا الكلام مع قليل من الشك. سيتطلب الأمر المزيد من الاختبار.
ذلك لأن جميع رموز يونيكود الموحدة القياسية مصممة لتناسب مربعًا، ونفترض أن المواقع تريد أن تكون رموزها التعبيرية بنفس الحجم بطريقة تعمل جنبًا إلى جنب مع النص والرموز التعبيرية الأخرى إذا كان هذا الإبريق 50x50 فسيؤدي ذلك إلى ترك فجوة كبيرة بين الأسطر مثل هذا:
عندما يتم تضمين سمات width و height للصورة في عنصر HTML <img>، يمكن للمتصفح حساب نسبة العرض إلى الارتفاع للصورة قبل تحميل الصورة. تُستخدم نسبة العرض إلى الارتفاع هذه لحجز المساحة اللازمة لعرض الصورة، مما يقلل أو حتى يمنع تغيير التخطيط عند تنزيل الصورة ورسمها على الشاشة. يعد تقليل تغيير التخطيط مكونًا رئيسيًا لتجربة المستخدم الجيدة وأداء الويب.
…
…
بينما قد تكون أفضل ممارسات المطورين من العقد الماضي قد أوصت بتجاهل سمات width و height للصورة في عنصر HTML <img>، نظرًا لتعيين نسبة العرض إلى الارتفاع، فإن تضمين هاتين السمتين يعتبر من أفضل ممارسات المطورين.
كل ما سبق، لديك مثال معقول لحالة لن يعمل فيها التحجيم الافتراضي لجميع الرموز التعبيرية… هذا الرمز التعبيري القديم للتحية أعرض بثلاث مرات، لذا فهو لا يتناسب بشكل جيد مع مربع. ليس من غير المعتاد أن تحد التطبيقات الأخرى جميع الرموز التعبيرية إلى مربعات لذا فإن سلوكنا ليس غريبًا جدًا في هذا الصدد (كل من Slack و Discord يفعلان ذلك، على سبيل المثال)… ولكن بدلاً من ذلك، يمكننا التفكير في السماح للرموز التعبيرية المخصصة بالحصول على أبعاد محددة اختياريًا.
العمل الأصعب هو على جزء “الرموز التعبيرية المخصصة” وعرض الرموز التعبيرية:
تحتاج الرموز التعبيرية المخصصة إلى سمة إضافية لكل رمز تعبيري: aspect-ratio (أو كبديل height و width).
يجب أن يستخدم عرض الرموز التعبيرية السمة الجديدة aspect-ratio للرموز التعبيرية المخصصة لتغيير width وفقًا لذلك - يبقى height عند 20px.
نهج سريع وسهل للرموز التعبيرية المخصصة:
بالنسبة للرموز التعبيرية المخصصة، قم بتعيين height="20" فقط ولا تقم بتعيين width على الإطلاق - وبالتالي تتخلى عن فائدة تعيين نسبة العرض إلى الارتفاع / العرض والارتفاع.
CSS: img.emoji { width: auto; }
إذا كان هذا الإبريق 50x50 فسيؤدي ذلك إلى ترك فجوة كبيرة بين الأسطر مثل هذا: