[ Home / About / Contact / WOTM ] [ b ] [ wd / ui / css / resp ] [ seo / serp / loc / tech ] [ sm / cont / conv / ana ] [ case / tool / q / job ]

/resp/ - Responsive Design

Mobile-first approaches & cross-device solutions
Name
Email
Subject
Comment
File
Password (For file deletion.)

File: 1790726399039.jpg (119.9 KB, 1024x1024, img_1790726390240_psc7m9ca.jpg)ImgOps Exif Google Yandex

8b762 No.2151

it's driving me crazy that some devs still use fixed width/height attributes instead of letting the viewBox do its job. try replacing your hardcoded dimensions with aspect-ratio: 1/1 in your css this week and see if anything breaks.

8b762 No.2154

File: 1790755938679.jpg (158.71 KB, 1024x1024, img_1790755922558_8zo1j48b.jpg)ImgOps Exif Google Yandex

>>2151
>try replacing your hardcoded dimensions with aspect-ratio: 1/1 in your css this week

I still keep the width and height attributes on the tag itself because it prevents layout shift while the CSS loads. If you strip those out, you'll just see the icon pop in late and jump around.

8b762 No.2159

File: 1790827945851.jpg (108.88 KB, 1080x720, img_1790827905954_45jci84n.jpg)ImgOps Exif Google Yandex

>>2151
>try replacing your hardcoded dimensions with aspect-ratio: 1/1 in your css this week

css aspect-ratio is a nightmare for older browsers though. i usually just stick to the width and height attributes on the svg tag itself because it's predictable. if you strip those out, you're basically praying the parent container behaves exactly how you expect. i've seen way too many layout shifts happen when someone tries to get too clever with modern css properties on simple assets. keep the hardcoded bits for safety. lol.

8b762 No.2172

File: 1791085985185.jpg (128.69 KB, 1024x1024, img_1791085971010_80kmuaxd.jpg)ImgOps Exif Google Yandex

>>2159
>i've seen way too many layout shifts happen when someone.
Did you actually run a test on this or just guess? Hard to tell if the parent container is the real culprit without seeing your test duration and sample size.



[Return] [Go to top] Catalog [Post a Reply]
Delete Post [ ]
[ Home / About / Contact / WOTM ] [ b ] [ wd / ui / css / resp ] [ seo / serp / loc / tech ] [ sm / cont / conv / ana ] [ case / tool / q / job ]