القوائم المنسدلة للبحث المتقدم في العمود الأيمن موجودة في الزاوية العلوية اليمنى بدلاً من المكان الذي أتوقعه.
ماك (سطح المكتب)
سفاري
اكتشاف جيد، هذه مشكلة غريبة حقًا. إنها تحدث فقط للعناصر الموجودة في العمود الأيمن. يحدث هذا على أي سمة تستخدم صورة خلفية باستخدام
body::before {
content: "";
display: block;
position: fixed;
width: 100%;
height: 100%;
filter: brightness(var(--brightness));
background-image: url($blobs-other), url($blobs-yellow), url($blue-wave);
background-size: 103vw, 103vw, 100vw;
background-repeat: no-repeat;
background-position: 50% 125%, 0px 95px, 0px 175px;
@media screen and (max-width: 1000px) {
background-attachment: scroll;
}
@media screen and (max-width: 800px) {
background-size: 103vw, 103vw, 200vw;
background-position: 50% 125%, 0px 95px, 0px 175px;
}
}
أرى أنها موجودة أيضًا في سمات “air” و “graceful”، وكلاهما يفعل ذلك.
تخمين جريء، لكنني أشك في أن المرشح يغير سياق التكديس وقد يسبب مشاكل؟ هل يمكنك التفكير في طريقة مختلفة للقيام بهذا الخلفية جوردان؟
كخطوة أولى، هل يمكنك المحاولة بدون filter ومعرفة ما إذا كان يعمل؟
لقد جربت ذلك، لكنه لا يعمل. على حد علمي، فإن إرفاقه عبر before هو الطريقة الوحيدة لجعل هذا يعمل و عدم تأثر الصفحة/التمرير.
يا له من خطأ غريب. يعمل بشكل كامل ولكنه يكسر الإصلاح. الغريب بما فيه الكفاية، استخدام ::after بدلاً من :before يعمل أيضًا…
لقد حاولت اختبار ذلك في المفتش، ولكن التبديل إلى ::after يخفي صورة الخلفية.
عذرًا، لم أقصد أن أقول إن هذا كان حلاً. ولا هو كذلك، كنت فقط أشير إلى ما هو متعلق بالغرابة.
بشكل أساسي، أي شيء “يزيل” الصورة من الخلفية، سواء كان ذلك عن طريق تحديد الموضع، أو بعد، أو تعيين العرض على 0، “يصلح” القائمة المنسدلة.
اشتبه جوفري في أن هذه يمكن أن تكون مشكلة مع سفاري. الغريب حقًا هو أن المفتش يظهر أن القائمة يجب أن توضع بشكل مناسب على الشاشة. البكسلات والأرقام صحيحة.
يتضح هذا في سفاري إذا قمت بإلغاء تحديد “ثابت” ثم أعدت تشغيله في موضع القائمة، فإن القائمة تكون في وضعها الصحيح بعد ذلك.
نظرًا لأن هذا النوع من حالات الاستخدام للصور الخلفية كان ساريًا منذ ما قبل عام 2020، أتساءل عما إذا كان هذا حديثًا، أو ما إذا كان هذا لم يعمل أبدًا، وهذه هي المرة الأولى التي نسمع فيها عن ذلك.
لقد رأيت ذلك أيضًا. لم أختبر ذلك من قبل. يبدو الأمر وكأنه يضع نفسه ضد إحداثيات عرض غير صحيحة أو شيء من هذا القبيل (على الرغم من أن إحداثيات translate3d صحيحة في المفتش، إلا أنها لا تتطابق مع الموضع الفعلي) وبعد ذلك نعيد تطبيق الخاصية، فقد تم تصحيحها.
يحتوي Safari على الكثير من الإشارات إلى أن background-attached:fixed لا يعمل بشكل صحيح، وقد يكون ذلك مرتبطًا بذلك بطريقة ما. لا يقدم أي من التكهنات حلاً على الرغم من ذلك 
يمكننا تغيير القائمة المنسدلة إلى position:absolute، بدون ترجمة، وهذا يعمل. الطريقة التي تم بها ذلك الآن غريبة بعض الشيء في البداية في رأيي.
نعم، هذه نقطة جيدة. ألا يجب أن تكون دائمًا إما فوق مربع الإدخال الخاص بها أو تحته؟ ربما يفرض علينا الاكتشاف استخدام الترجمة.
تم إصلاح هذا الآن.