Website

Please provide a description of your bug or issue with the VRChat website.
Each post should be an individual issue!
Announcement Images Improperly Scaled Due To <img />
Issue Announcement images currently do not scale properly, due to the use of <img /> . Instead, background-image on the parent DIV should be used, alongside aspect-ratio in portrait mode. Problematic Code Example Landscape <div class="col-12 col-sm-6 col-md-6 col-lg-5 col-xl-5 d-none d-sm-block"> <img src="https://api.vrchat.cloud/api/1/file/file_f400a4ff-aed6-4b81-a02f-db4c832a3db4/1/file" class="css-rlkrvh efpyl680"> </div> Portrait <div class="col-12 d-sm-none"> <img src="https://api.vrchat.cloud/api/1/file/file_f400a4ff-aed6-4b81-a02f-db4c832a3db4/1/file" class="css-rlkrvh efpyl680"> </div> Fixed Code Example Landscape <div class="col-12 col-sm-6 col-md-6 col-lg-5 col-xl-5 d-none d-sm-block" style="background: no-repeat center url('https://api.vrchat.cloud/api/1/file/file_f400a4ff-aed6-4b81-a02f-db4c832a3db4/1/file'); background-size: cover;"></div> Portrait <div class="col-12 d-sm-none" style="background: no-repeat center url('https://api.vrchat.cloud/api/1/file/file_f400a4ff-aed6-4b81-a02f-db4c832a3db4/1/file'); background-size: cover; aspect-ratio: 16/9;"></div> Explanation Not all rendering engines handle <img /> sizing the same way as <div /> ; In WebKit, for example, a height of 100% inside a flex-item causes the flex-item the image is within to scale to the height of the parent container. The image is sizing to 100% the parent container and not the immediate parent which it is within. DIVs however scale normally, and, for the seemingly desired implementation (image fills DIV, DIV is height of announcement in landscape and the width of the announcement in 16:9 in portrait), setting the background property with a separate background-size is preferable. In this case, in both landscape and portrait, setting the background property of the DIVs, which originally contained the image, to no-repeat center ('image-url') ensures that they display the image as their background, center-aligned. Setting the background-size to cover ensures that the image scales to fill the container without resizing it. This property cannot be set in the combined background property for compatibility reasons. In portrait mode , setting the aspect-ratio property of the DIV containing the image to 16/9 allows the browser to intrinsically set its height to 9/16ths its width . Without this the image has a height of 0 . In both cases, the <img /> is removed entirely, as it is not needed. Environment macOS Sonoma Safari 17.3 (19617.2.1.11.3) WebKit Attachments Before and after pictures of an announcement, displaying both the problem, and the results of the fix.
3
·

complete

Load More