Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

cuelang.org: mobile rendering of JSON and CUE has inconsistent font sizes #3602

Open
jpluscplusm opened this issue Nov 27, 2024 · 2 comments · May be fixed by cue-lang/cuelang.org#483
Open
Labels
cuelang.org frontend cuelang.org frontend UI/UX related NeedsInvestigation

Comments

@jpluscplusm
Copy link
Collaborator

What page were you looking at?

https://cuelang.org/docs/concept/how-cue-works-with-json/

What version of the site were you looking at?

cue-lang/cuelang.org@597542b

What did you do?

I viewed the page on a mobile device (an iPhone 14 running iOS 18.0.1 with the default Mobile Safari browser).

What did you expect?

That the page would have code rendered consistently, and similarly to a desktop device.

What did you see instead?

Some code and comments inside CUE and JSON code tabs is rendered with a larger font size than other code and comments. There's no pattern I can discern that decides which code will be larger, but it's consistent across page loads and doesn't occur on the same page on a desktop device.

IMG_6836
IMG_6837

@jpluscplusm jpluscplusm added NeedsInvestigation Triage Requires triage/attention cuelang.org frontend cuelang.org frontend UI/UX related labels Nov 27, 2024
@myitcv myitcv removed the Triage Requires triage/attention label Nov 28, 2024
@jpluscplusm jpluscplusm moved this from Backlog to Planned in cuelang.org Roadmap Nov 28, 2024
@JorindeUsMedia
Copy link
Collaborator

JorindeUsMedia commented Dec 10, 2024

Could not reproduce on Android or Browser responsive mode. Tested on safari desktop and there's no problem there. The problem seems to be on Safari on Iphone. It needs further debugging.

@JorindeUsMedia
Copy link
Collaborator

Found it: safari does this when it thinks a piece of text is too small. Can be turned off: https://stackoverflow.com/questions/3226001/some-font-sizes-rendered-larger-on-safari-iphone

JorindeUsMedia added a commit to cue-lang/cuelang.org that referenced this issue Dec 17, 2024
- Turn off webkit text-size-adjust so Safari in Iphone to make sure Safari doesn't zoom in the text anymore

To test:
Go to https://cuelang.org/docs/concept/how-cue-works-with-json/#validating-json-files-against-a-schema on Safari on an Iphone. The text inside the code block should no be zoomed in anymore

Fixes: cue-lang/cue#3602
Signed-off-by: Jorinde Reijnierse <jorinde.reijnierse@usmedia.nl>
JorindeUsMedia added a commit to cue-lang/cuelang.org that referenced this issue Dec 18, 2024
- Turn off webkit text-size-adjust so Safari in Iphone to make sure Safari doesn't zoom in the text anymore

To test:
Go to /docs/concept/how-cue-works-with-json/#validating-json-files-against-a-schema on Safari on an Iphone. The text inside the code block should no be zoomed in anymore

Fixes: cue-lang/cue#3602
Signed-off-by: Jorinde Reijnierse <jorinde.reijnierse@usmedia.nl>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
cuelang.org frontend cuelang.org frontend UI/UX related NeedsInvestigation
Projects
Status: Planned
Development

Successfully merging a pull request may close this issue.

3 participants