iOS 'is-icon' Button Gap Issue: Seeking Fixes and Insights | Relume Community

iOS 'is-icon' Button Gap Issue: Seeking Fixes and Insights

Hey, has anyone else had an issue with 'is-icon buttons on iOS? Both standard and link buttons are rendered with a large gap between the text and icon, seemingly because they're rendered as grids, not flex boxes. I know flex gap can be an issue on iOS but the problem occurs even when the gap is set to 0 and I use margin on the text instead. I'm not sure if any has had this issue and fixed it. The images show the difference between Webflow and iOS

6 comments

Matt J.
·
Jacob W. would you mind sharing a read-only? Saves time from having to recreate the scene, as it were! 🙌
Jacob W.
·
Here you go: https://preview.webflow.com/preview/indie-kitchen?utm_medium=preview_link&utm_source=dashboard&utm_content=indie-kitchen&preview=1e27b6e68afa74e463ff0add53e5a55e&workflow=preview The module with buttons is just below the hero!
Matt J.
·
Jacob W. Safari is the modern day IE - so its sometimes pretty difficult to pinpoint these things. But I did notice that you are using inline-flex instead of flex - our default styling is flex. I suppose its possible Safari has poor support for inline-flex? Can you send a published URL so I can load it in Safari and see a few things there?
Jacob W.
·
Thanks for taking a look! Here is the link: https://indie-kitchen.webflow.io/ I'm actually getting the issue on both chrome and safari on iOS. The issue was also happening with flex, I just tried inline-flex to see if that fixes it (no change)
Matt J.
·
Jacob W. oh, I did not catch that it was also on chrome - after some quick testing - this is actually not the default behavior of our button combo classes. So its likely an issue with something you've modified here or with the interactions that you have applied. https://preview.webflow.com/preview/matts-awesome-site-f8a28b?utm_medium=preview_link&[…]b&preview=6a0b666ecdd25739e18cded10e8012a3&workflow=preview I would maybe play around with the list itself and see if you can get the button to stay "contained" - very hard to troubleshoot because its only happening on iOS. I do see the issue but I have not seen it before and I've used this combo class before on client projects.
Jacob W.
·
Thanks so much for testing! I've fixed it on my side. I'd accidentally changed the icon class to 'icon-height-xsmall' from 'icon-embed-xsmall' when copying over the icons. Not sure why it was only causing the issue on iOS but at least it's working now