Ehren

We’ll have to wait for a dev to take a look, it’s beyond my expertise 🙂

This is potentially happening due to lazy loading (which only loads images when they're in/near the viewport). When the images are in a carousel, they're considered offscreen until they're scrolled to, but maybe iOS isn't seeing any of those images at all until the page is scrolled. I've just pushed an attempted fix, which involves adding the width and height attributes to the images. This will reserve space for them and give the browser a better idea on where they'll appear in the viewport before they've loaded. If this doesn't fix the issue in the next update, let me know.

Thanks, I've just fixed issues 1, 2 and 3. I can't reproduce 4 when using RTL, although I'm assuming it's a language issue rather than the language direction issue (because English in RTL works fine). I'll pass that issue onto a developer for you.

This is a bug introduced in Safari 18.2 (released a few days ago). It fails to compute clamp values when percentages are calculated inside them, like so: object-position: 50% clamp(0%, var(--offset) * 1%, 100%); Clamping an integer and then converting it to a percentage fixes the bug: object-position: 50% calc(clamp(0, var(--offset), 100) * 1%); All fixed for the next update.

Everything’s correct, you just need to assign a smaller column width. By default, the “ideal size” for columns is 280px. Since there isn’t enough space for 6 of those columns (1560px + gaps), they collapse instead of becoming squashed. Making the ideal size of columns smaller can be done by adding a basis class, such as i-basis_120 to the ipsGrid element (the basis name was inspired by flex-basis and can be used on flex children too). Just make sure to test all screen sizes by adjusting your browser window.

Thanks for the feedback, I agree with all of this. I'll likely remove the "mobile carousel" feature for the moment until I can find a better solution in the future. The tall widgets make smaller ones look too empty which isn't ideal. I've also simplified the Followers area by removing the "See all followers" link (clicking/tapping on the row takes you to the same page anyway). And if the box gets too narrow, the avatars will wrap to a new line instead of squashing the text. 🤝

Thanks, all fixed 🤝

Hello, Are you able to post the exact URL of that page? I think I've found the correct one, but the page is working fine for me in every browser (on desktop and mobile).

This will do it. Nice and simple 🙂 /* Reverse user navigation */ .ipsUserNav--member{ flex-direction: row-reverse; }

I’m glad you think so too. Numbers have been much easier to work with compared to descriptive names. 🙂 I should also mention that those variables map directly to utility classes, such as class=“i-background_2 i-color_hard”

All of the theme colours are available as variables. The most useful ones for backgrounds are --i-background_1 through to --i-background_6. Background 1 is the lightest colour in a light theme, and the darkest in the dark theme. There are 3 main colors: --i-color_root, --i-color_soft and --i-color_hard. "Root" is the global text colour, "soft" is a subtle/softer colour and "hard" is a higher contrast colour. There are also a bunch of others including --i-color_primary, --i-color_secondary, --i-color_positive, --i-color_negative. In practice, variables in v5 look like this: .box{ background-color: var(--i-background_3); color: var(--i-color_hard); padding: 1em; }

This is the "focus outline" for the <main> element, caused by the tabindex attribute (which helps with keyboard navigation). The outline appears when the <main> element receives focus. I'll remove it for the next update since it's just a browser default which hasn't been removed.

Changed Status to Not a bug

This is working correctly. The second property uses the dvh unit. This was only widely supported from 2023. It's typically a better choice than vh for browser UI's which change in height, like on iPadOS). If dvh isn't supported by the browser, the first height property with vh is used. 🙂

If you can elaborate on what you're trying to achieve, I might be able to help 🙂