text inflation in mobile browser
Problem
Due to a "feature" in some mobile phone browsers, font sizes get inflated in certain circumstances when viewing slides. This can cause overflow of slide content off of readable screen area. This affects the right-column class and possibly user-defined classes as well. Yes that's native to remark, but this is intended as a fix for the internal themes here.
When displaying slideshow on Android Chrome text within right-column class gets inflated.
Text in right-column class

Normal text

Fix
I struggled with fixing this until I found the option to disable text size adjustments, which is a newish css property. So I thought I'd recommend adding it to css files lest mobile viewers can't read your slideshows. Adding the css rule below maintains consistent text sizes.
/* prevent small screen font size inflation */
body {
-webkit-text-size-adjust: none;
-moz-text-size-adjust: none;
-ms-text-size-adjust: none;
}
Here's a minimal working example. To reproduce:
- knit
- deploy to web
- view in Android Chrome
---
title: "test"
author: "me"
output:
xaringan::moon_reader:
seal: false
lib_dir: libs
nature:
highlightStyle: github
countIncrementalSlides: false
---
# inflated text
.left-column[
### heading
]
.right-column[
Twas brillig, and the slithy toves
Did gyre and gimble in the wabe:
All mimsy were the borogoves,
And the mome raths outgrabe.
"Beware the Jabberwock, my son!
The jaws that bite, the claws that catch!
Beware the Jubjub bird, and shun
The frumious Bandersnatch!"
]
---
# non-inflated text
Twas brillig, and the slithy toves
Did gyre and gimble in the wabe:
All mimsy were the borogoves,
And the mome raths outgrabe.
"Beware the Jabberwock, my son!
The jaws that bite, the claws that catch!
Beware the Jubjub bird, and shun
The frumious Bandersnatch!"
By filing an issue to this repo, I promise that
- [X] I have fully read the issue guide at https://yihui.org/issue/.
- [X] I have provided the necessary information about my issue.
- If I'm asking a question, I have already asked it on Stack Overflow or RStudio Community, waited for at least 24 hours, and included a link to my question there.
- If I'm filing a bug report, I have included a minimal, self-contained, and reproducible example, and have also included
xfun::session_info('xaringan'). I have upgraded all my packages to their latest versions (e.g., R, RStudio, and R packages), and also tried the development version:remotes::install_github('yihui/xaringan'). - If I have posted the same issue elsewhere, I have also mentioned it in this issue.
- [X] I have learned the Github Markdown syntax, and formatted my issue correctly.
I understand that my issue may be closed if I don't fulfill my promises.