From 1fd071971bd78b75391259c179f94ee2d1585929 Mon Sep 17 00:00:00 2001 From: Kovid Goyal Date: Tue, 13 Apr 2021 09:42:53 +0530 Subject: [PATCH] Fix font size for input elements in viewer UI --- src/pyj/widgets.pyj | 25 ++++++++++--------------- 1 file changed, 10 insertions(+), 15 deletions(-) diff --git a/src/pyj/widgets.pyj b/src/pyj/widgets.pyj index 67470f201d..fbf1a45bbe 100644 --- a/src/pyj/widgets.pyj +++ b/src/pyj/widgets.pyj @@ -4,7 +4,6 @@ from __python__ import hash_literals from dom import build_rule, clear, svgicon, create_keyframes, set_css, change_icon_image, add_extra_css, ensure_id from elementmaker import E -from utils import is_ios from book_list.theme import get_color @@ -215,20 +214,16 @@ add_extra_css(def(): ans += create_button.style + '\n' ans += create_spinner.style + '\n' ans += Breadcrumbs.STYLE_RULES + '\n' - if is_ios: - # Apple sets the default font size for these too small in its - # browser css and then zooms in on them making them unusable. - # This of course means we need to hardcode a font size for these so in - # the future when Apple's idiot designers decide they want to change - # the default font sizes, things will break again - # https://blog.osmosys.asia/2017/01/05/prevent-ios-from-zooming-in-on-input-fields/ - ans += ''' - select, textarea, input[type="text"], input[type="password"], - input[type="datetime"], input[type="datetime-local"], - input[type="date"], input[type="month"], input[type="time"], - input[type="week"], input[type="number"], input[type="email"], - input[type="url"] { font-size: 16px } - ''' + # Chrome hardcodes the size of these to 13.3px. In safari on some devices + # the font size is smaller than the body font size and small enough to + # trigger page zooms. So set it to 1em so they scale with body font size. + ans += ''' + select, textarea, input[type="text"], input[type="password"], + input[type="datetime"], input[type="datetime-local"], + input[type="date"], input[type="month"], input[type="time"], + input[type="week"], input[type="number"], input[type="email"], + input[type="url"], input[type="search"] { font-size: 1em } + ''' return ans )