diff --git a/app/assets/javascripts/discourse/app/instance-initializers/safari-viewport-setup.js b/app/assets/javascripts/discourse/app/instance-initializers/safari-viewport-setup.js new file mode 100644 index 00000000000..159614ce121 --- /dev/null +++ b/app/assets/javascripts/discourse/app/instance-initializers/safari-viewport-setup.js @@ -0,0 +1,20 @@ +/* + In iOS Safari, setting user-scalable=no doesn't actually prevent the user from zooming in. + But, it does prevent the annoying 'auto zoom' when focussing input fields with small font-sizes. +*/ +export default { + initialize(container) { + if (!container.lookup("service:capabilities").isIOS) { + return; + } + + const viewport = document.querySelector("meta[name=viewport]"); + if (viewport) { + const current = viewport.getAttribute("content"); + viewport.setAttribute( + "content", + current.replace("user-scalable=yes", "user-scalable=no") + ); + } + }, +}; diff --git a/app/assets/stylesheets/common/font-variables.scss b/app/assets/stylesheets/common/font-variables.scss index ed4b9cca6dc..d98d942d4d3 100644 --- a/app/assets/stylesheets/common/font-variables.scss +++ b/app/assets/stylesheets/common/font-variables.scss @@ -28,9 +28,6 @@ --font-down-1-rem: 0.8706rem; --font-down-2-rem: 0.7579rem; - // inputs/textareas in iOS need to be at least 16px to avoid triggering zoom on focus - --font-size-ios-input: max(1em, 16px); - // Common line-heights --line-height-small: 1; --line-height-medium: 1.2; // Headings or large text diff --git a/app/assets/stylesheets/common/foundation/mixins.scss b/app/assets/stylesheets/common/foundation/mixins.scss index 3b7cf47b89b..ecc5185e84a 100644 --- a/app/assets/stylesheets/common/foundation/mixins.scss +++ b/app/assets/stylesheets/common/foundation/mixins.scss @@ -115,12 +115,6 @@ $hpad: 0.65em; line-height: normal; box-sizing: border-box; padding: $vpad $hpad; - - .ios-device & { - font-size: var(--font-size-ios-input); - padding-top: $vpad * 0.8; - padding-bottom: $vpad * 0.8; - } } @mixin sticky { diff --git a/app/assets/stylesheets/mobile/discourse.scss b/app/assets/stylesheets/mobile/discourse.scss index 63b560ad645..37685db12b3 100644 --- a/app/assets/stylesheets/mobile/discourse.scss +++ b/app/assets/stylesheets/mobile/discourse.scss @@ -11,7 +11,6 @@ body { .ios-device { textarea { background-color: var(--secondary); - font-size: var(--font-size-ios-input); -webkit-tap-highlight-color: transparent; } diff --git a/app/assets/stylesheets/mobile/form-kit/_control-input.scss b/app/assets/stylesheets/mobile/form-kit/_control-input.scss index 2ffda7a96fe..d64c1506f39 100644 --- a/app/assets/stylesheets/mobile/form-kit/_control-input.scss +++ b/app/assets/stylesheets/mobile/form-kit/_control-input.scss @@ -1,5 +1,4 @@ .form-kit__before-input, .form-kit__after-input { - font-size: var(--font-size-ios-input); height: 2.25em; }