I have noticed that some buttons have been corrupted during one of the upgrades of the underlying codebase. I’m not sure when it happened. The image below illustrates the problem. The first button was created a long time ago. The second was added today. The buttons have identical settings and sits under the same container.
Duplicating the corrupt button will create another corrupt version.
The problem does not affect all buttons. Only some buttons seems to be affected.
I’m now able to consistently recreate the bug, and it might also affect other objects.
In some of my designs, I use icon buttons for small screens and regular buttons from tablet size and up. To make the design in Create resemble the final result, I use the Display parameter to control visibility.
So the icon button is only visible on mobile, while the regular button is shown on all other screen sizes.
Steps to reproduce the bug:
- Add a button to your design on the Small screen size.
- Switch to Extra small (mobile) and turn off visibility (set Display to None) for the button.
- Switch back to Small, and turn visibility back on.
The button is now corrupted — it breaks into two lines while still showing the icon. Setting a fixed width doesn’t fix it. Switching back to Extra small and re-enabling visibility also doesn’t solve the issue.
The only workaround I’ve found is to add a new button and control its visibility at runtime instead.
Hi!
Thanks for reproducing.
This is a bug - a challenge has been registered!
Another workaround is to put a container around the button, and set the display values on the container instead of the button.