This issue is happening for one specific user, even though all the default settings are applied. The error affects the display of some text and button styles, as shown in the images below.
For this user, the text alignment and shadows on the button seem to be rendered inconsistently compared to other users or devices. Specifically: The text size appears to change.
Shadows around the button text are inconsistent between the two cases.
Our Setup:
We’re using React for the front-end.
ChakraUI is used for styling, and we’re applying the default Chakra theme with no custom overrides.
All users are accessing the app via Safari on iOS, but this issue only occurs for one specific user.
Debugging Attempts:
We’ve confirmed that the issue persists across page reloads and browser cache clearing.
There are no user-specific styles being applied that could explain this.
Questions:
What could be causing this inconsistency in text rendering for one user?
Is there any known issue with Safari or ChakraUI that could result in text or button shadows displaying incorrectly?
Any insights or suggestions would be greatly appreciated!
2
It’s the width of your viewports. The word “Quiz” can’t fit in the first example. (Well it can, but probably not with the css padding on the element)
We need either a working example or a link to give you a detailed answer.