‏interactive-widget به WebKit رسید

نویسنده‌ی این پست، Bramus، که خودش توی تیم Chrome روی همین موضوع کار کرده، می‌گه حدود یک ماه پیش پشتیبانی از interactive-widget به WebKit اضافه شد. داستان از ۲۰۲۲ شروع شد: کروم تا نسخه ۱۰۷ وقتی کیبورد مجازی باز می‌شد، layout viewport (یعنی همون ویوپورتی که چیدمان صفحه بر پایه‌ش حساب می‌شه) رو کوچیک می‌کرد. از نسخه ۱۰۸ فقط visual viewport (چیزی که واقعاً جلوی چشم کاربره) کوچیک می‌شه تا رفتارش با سافاری یکی بشه.

نتیجه‌ی جانبی این تغییر اینه که محتوای position: fixed می‌تونه زیر کیبورد گم بشه. بعضی توسعه‌دهنده‌ها هم دقیقاً یه نوار ابزار ثابت می‌خوان که بالای کیبورد بشینه. برای همین تیم کروم دایرکتیو interactive-widget رو برای تگ meta ویوپورت درست کرد تا خود توسعه‌دهنده تصمیم بگیره چی بشه:

<meta name="viewport" content="width=device-width, initial-scale=1.0, interactive-widget=resizes-content">

این دایرکتیو سه مقدار می‌گیره: resizes-visual فقط visual viewport رو کوچیک می‌کنه که همون رفتار پیش‌فرضه، resizes-content هر دو ویوپورت رو کوچیک می‌کنه، و overlays-content هیچ ویوپورتی رو دست نمی‌زنه و کیبورد میاد روی محتوا. یعنی با resizes-content همون نوار ثابت پایین صفحه می‌شینه بالای کیبورد و دیگه قایم نمی‌شه.

نویسنده می‌گه برای تست مجبور شده خود WebKit رو لوکال بیلد کنه و با یه مرورگر ساده به اسم MobileMiniBrowser روی شبیه‌ساز آیفون امتحانش کنه، چون فعلاً راه ساده‌تری نیست. به گفته‌ی خودش اونجا درست کار می‌کنه، ولی دلش می‌خواد توی سافاری واقعی روی iOS هم تستش کنه تا ببینه نوار آدرس شناور سافاری چه اثری می‌ذاره. حدس می‌زنه این قابلیت با سافاری ۲۷.۱ بیاد، هرچند توی ریلیز نوت‌های Safari Technology Preview هیچ اسمی ازش نیست.

نکات کلیدی:

• interactive-widget از کروم ۱۰۸ روی اندروید و از فایرفاکس ۱۳۳ پشتیبانی می‌شه.
• توی سورس WebKit پیاده شده، ولی هنوز توی هیچ نسخه عمومی سافاری یا Safari Technology Preview نیومده.
• سه مقدار داره: resizes-visual (پیش‌فرض)، resizes-content و overlays-content.
• با resizes-content هر دو ویوپورت کوچیک می‌شن، پس المان‌های position: fixed زیر کیبورد نمی‌رن.