یک زوج تغییرات در Chrome 108 در راه است

"تغییر سرریز در عناصر جایگزین شده در CSS":

از Chrome 108، عناصر جایگزین شده زیر به ویژگی سرریز احترام می‌گذارند: img, video و canvas. در نسخه‌های قبلی Chrome، این ویژگی در این عناصر نادیده گرفته می‌شد.

این بدان معناست که تصویری که قبلاً در کادر محتوای خود بریده شده بود، اکنون می‌تواند خارج از این محدوده‌ها را بکشد، در صورتی که برای انجام این کار در یک شیوه نامه مشخص شده باشد.

بنابراین، عناصر تصویر، ویدیو، و بوم که زمانی بریده شده بودند ممکن است هنگام ارسال Chrome 108 سرریز را نشان دهند. موقعیت‌های ذکر شده که ممکن است بر کار موجود شما تأثیر بگذارد:

• La object-fit ویژگی برای مقیاس کردن تصویر و پر کردن کادر استفاده می شود. اگر نسبت تصویر با کادر مطابقت نداشته باشد، تصویر خارج از محدوده ترسیم می شود.
• La border-radius ویژگی باعث می شود یک تصویر مربع مانند یک دایره به نظر برسد، اما به دلیل overflow قابل مشاهده است قطع شدن دیگر رخ نمی دهد.
• محیط inherit: all و باعث ارث بردن تمام خواص از جمله overflow.

ارزش خواندن مقاله کامل برای نمونه کد را دارد، اما راه حل برای سرریز ناخواسته قابل مشاهده نادیده گرفتن پیش فرض UA است. overflow: visible با overflow: clip:

img {
  overflow: clip;
}

«آماده شدن برای تغییرات رفتار تغییر اندازه ویوپورت که به Chrome در Android می‌آیند»:

در ماه نوامبر، با انتشار Chrome 108، کروم تغییراتی را در نحوه عملکرد Layout Viewport هنگام نمایش صفحه‌کلید روی صفحه (OSK) اعمال می‌کند. با این تغییر، کروم در اندروید دیگر اندازه Layout Viewport را تغییر نمی‌دهد و در عوض فقط اندازه Visual Viewport را تغییر می‌دهد. این کار کروم را در اندروید با رفتار کروم در iOS و سافاری در iOS برابر می کند.

این تغییر مربوط به سردردهای رایج کار با واحدهای دید و موقعیت ثابت در دستگاه های لمسی تلفن همراه است. ما در طول سالها آن را پوشش داده ایم (و سعی کرده ایم آن را حل کنیم):

این تغییر به این معنی است که Chrome در Android دیگر اندازه Layout Viewport را با نمایش صفحه‌کلید روی صفحه تغییر نمی‌دهد. بنابراین، زمانی که صفحه کلید دستگاه نمایش داده می‌شود، مقادیر محاسبه‌شده واحدهای viewport دیگر کوچک نمی‌شوند. همین امر در مورد عناصری که به گونه ای طراحی شده اند که نمای کامل را اشغال کنند، دیگر برای قرار دادن صفحه کلید کوچک نمی شوند. و دیگر عنصری با موقعیت ثابت ظاهر نمی‌شود که بداند کیبورد کجا ظاهر می‌شود.

این رفتار بین مرورگرهای منسجم تری را به ارمغان می آورد که با Chrome، Safari و Edge در iOS و iPadOS همخوانی دارد. این عالی است، حتی اگر رفتار به‌روزرسانی‌شده کمتر از حد ایده‌آل باشد، زیرا رابط کاربری صفحه‌کلید همچنان می‌تواند عناصری را که سر راهش قرار می‌گیرند پوشش داده و مبهم کند.

اگر ترجیح می‌دهید وقتی این اتفاق می‌افتد، عناصر قابل مشاهده باقی بمانند، ارزش نگاه کردن به یک را دارد راه حل کریس مدت ها قبل به اشتراک گذاشته بود که از پیشوند استفاده می کند webkit-fill-available ویژگی:

body {
  min-height: 100vh;
  min-height: -webkit-fill-available;
}
html {
  height: -webkit-fill-available;
}

این از فضای موجود در ویوپورت به جای آنچه که توسط رابط کاربری پوشانده شده است استفاده می‌کند... اما کروم در حال حاضر این ویژگی را نادیده می‌گیرد، و من شرط می‌بندم نیکل در جیبم باشد که بعید است در نسخه 108 به آن احترام بگذارد. اگرچه ممکن است این یک موضوع بحث برانگیز باشد کروم 108 نیز معرفی می کند پشتیبانی از واحدهای نمای کوچک، بزرگ و پویا که قبلاً در سافاری و فایرفاکس پشتیبانی می‌شوند.