pettro
28 أكتوبر 2021، 9:31م
1
باستخدام community.home-assistant.io مع متصفح كروم الإصدار 95.0.4638.54 (النسخة الرسمية) (64 بت). تواجه مشكلة غريبة تظهر فقط على سطح المكتب المنزلي. يبدو أن سطح المكتب الخاص بالعمل يعمل بشكل جيد، غير أنني لا أعرف إصدار كروم الحالي.
هذه المشكلة:
عند النقر على زر البحث، أو قائمة الهامبرغر (ثلاثة خطوط عمودية)، أو أيقونة المستخدم، تنتقل الصفحة تلقائيًا إلى أعلى شريط التمرير الحالي بدلاً من إظهار مربع القائمة المنسدلة.
تحدث هذه المشكلة فقط عندما ينفصل مربع القائمة المنسدلة عن الجانب الأيمن من الشاشة بحيث يترك فجوة بينه وبين شريط التمرير العمودي. يبدو أن هذا يحدث عند حوالي 1350 بكسل في الاتجاه الأفقي (x) بما في ذلك شريط التمرير العمودي.
تعديل: الطريقة الوحيدة التي تظهر فيها المشكلة عندما يكون مربع القائمة المنسدلة منفصلاً هي عندما تكون في أعلى الصفحة (المشاركة 1):
ثلاثة بكسلات أقل…
ما لم تتمكن من إعادة إنتاج المشكلة هنا أو على try.discourse.org ، فمن المؤكد تقريبًا أن المشكلة تتعلق بتخصيص CSS وتخطيطك. جرب أيضًا في الوضع الآمن.
pettro
28 أكتوبر 2021، 9:40م
4
يحدث أيضًا في الوضع الآمن
أواجه صعوبة في إعادة إنتاج هذه المشكلة، ما هي الخطوات المحددة؟ لدي متصفح عريض جدًا، وأنا أقوم بالتمرير لأسفل في هذا الموضوع وأضغط على الصورة الرمزية، لكنه لا ينتقل إلى الأعلى؟
pettro
28 أكتوبر 2021، 9:47م
6
في الواقع، الأمر لا يتطلب سوى توسيع نافذة المتصفح الخاص بك. وبالنسبة للمعلومة، فإن هذه المشكلة لا تظهر في متصفح Edge على نفس الجهاز، بل فقط في كروم.
أدوات المطورين في الوضع الآمن لم تظهر أي شيء، باستثناء رسالة قد تكون أو لا تكون ذات صلة:
إن صفحة أو سكريبت ما يقوم بالوصول إلى واحد على الأقل من navigator.userAgent أو navigator.appVersion أو navigator.platform. بدءًا من إصدار كروم 101، سيتم تقليل كمية المعلومات المتاحة في سلسلة معرف المستخدم.
لحل هذه المشكلة، استبدل استخدام navigator.userAgent أو navigator.appVersion أو navigator.platform باكتشاف الميزات، أو التحسين التدريجي، أو الانتقال إلى navigator.userAgentData.
لاحظ أنه لأسباب تتعلق بالأداء، يتم عرض الوصول الأول فقط إلى أحد هذه الخصائص.
Johani
28 أكتوبر 2021، 9:51م
7
هل لديك أي إضافات للمتصفح؟ هل يمكنك المحاولة في نافذة التصفح المتخفي؟
إعادة التصنيف إلى دعم حتى يتمكن شخص آخر على الأقل من تكرار المشكلة. لا يمكنني بالتأكيد تكرارها، وأنا أستخدم Chrome/Windows.
pettro
28 أكتوبر 2021، 9:54م
9
يحدث أيضًا في وضع التصفح المتخفي.
pettro
28 أكتوبر 2021، 9:56م
10
للعلم، يتم تشغيل الإصدار 2.8.0.beta7
pettro
28 أكتوبر 2021، 9:59م
11
آخر معلومة: بدأت هذه المشكلة بنسبة 100% بعد تحديث مجدول لنظام Windows وإعادة التشغيل. نظام التشغيل Windows 10 Pro، إصدار البناء 19042.1288، الإصدار التجريبي 120.2212.3920.0.
أنا محدّث أيضًا على نظام Windows / Chrome
لقد قمت بتغيير حجم النافذة بعدة طرق مختلفة ولا يمكنني إعادة إنتاج هذه المشكلة..
pettro
29 أكتوبر 2021، 1:02ص
13
هل لديك روابط لإعداد خادم تطوير يمكنني من خلاله تصحيح المشكلة؟ هل يتم الإعداد عادةً عبر VSCode أم VS؟
Moin
29 أكتوبر 2021، 11:22ص
14
لقد أبلغ شخص آخر عن نفس المشكلة.
أرى نفس السلوك في كروم أيضًا، لكن ليس في فايرفوكس
pettro
31 أكتوبر 2021، 12:38م
16
أنا مستعد لتجربة أي شيء، وقد كنت أطور البرمجيات لسنوات الآن. هذا الخطأ مزعج للغاية، وأي توجيه أو رابط أو أي شيء يساعد في تحديد السبب الجذري لهذه المشكلة سيكون موضع ترحيب، خاصةً وأنكم لا تستطيعون إعادة إنتاجه.
Johani
5 نوفمبر 2021، 4:48م
17
لقد قمت بتحديث Chrome على سطح المكتب اليوم وبدأت في رؤية هذه المشكلة. يجب أن يحل هذا الأمر المشكلة.
main ← hnb-ku:fix-dropdown-scroll
merged 04:09PM - 05 Nov 21 UTC
Context:
https://meta.discourse.org/t/width-of-page-causes-an-autoscroll-to-t… he-top-of-the-page-when-accessing-serach-user-hamburger-comboboxes-chrome-only/207459
When one of the header panels is opened, there's some logic to set the focus either on the first link - in the case of the hamburger and user menus - or the search bar in the case of the search panel.
Hamburger
https://github.com/discourse/discourse/blob/1f8939c0f130892397fb7ee8b0f348f2a7f8b636/app/assets/javascripts/discourse/app/widgets/header.js#L497
User menu
https://github.com/discourse/discourse/blob/1f8939c0f130892397fb7ee8b0f348f2a7f8b636/app/assets/javascripts/discourse/app/widgets/header.js#L487
Search panel
https://github.com/discourse/discourse/blob/1f8939c0f130892397fb7ee8b0f348f2a7f8b636/app/assets/javascripts/discourse/app/widgets/header.js#L627
When `focus()` is called, the browser automatically scrolls to that element. This wouldn't normally be an issue; however, since the header is set to sticky, it causes problems on Chrome specifically. Here's what it looks like
https://d11a6trkgmumsb.cloudfront.net/original/3X/1/e/1e5cafe12de556ba09f13c42cd74f1f38c873868.mp4
and it's even more prominent on topic pages since it tries to find the top of the page, causing more posts to load, which causes the height to change, which causes jitter.
This PR adds the [preventScroll](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#focus_with_focusoption) option to `focus()` to prevent this automatic scrolling
Here's what it looks like after
https://d11a6trkgmumsb.cloudfront.net/original/3X/8/e/8e475f7b3a4cd7151fa034343e88c4ab4d09cb11.mp4
هناك تفاصيل أكثر في وصف طلب السحب (PR). الإصلاح متاح الآن على موقع Meta.
Johani
6 نوفمبر 2021، 12:12م
18
قرأتُ المزيد قليلاً عن هذا الموضوع وتمكّنت من تتبع المشكلة. هذا الخطأ - وبعض الأخطاء الأخرى المتعلقة بـ CSS sticky - سيظهر فقط إذا كانت ميزة
Experimental Web Platform features
مفعّلة في إعدادات Chrome التجريبية (Chrome flags). وهذا يفسّر سبب ظهور المشكلة لدى بعض الأشخاص فقط رغم استخدامهم نفس إصدار Chrome.
إذا كنت تواجه هذه المشكلة، فتأكّد من تعطيلها هنا:
chrome://flags/#enable-experimental-web-platform-features
لقد أرسلت طلب سحب (PR) لإلغاء التغيير المذكور أعلاه لأنه لم يعد ضروريًا.
