discourse/discourse
1
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2025-03-09 14:34:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

FIX: Prevent input zooming in iOS

Browse Source 
Since enabling pinch-to-zoom in iOS (eae22548de4eedad875555e7353b8abfdce2452b), there was an issue with inputs: Safari auto-zooms inputs with font-size under 16px. Now zooming will be disabled while focus is on an input.

This commit also removes a) a lightbox zoom-enabling event (no longer needed) and b) a comment about iOS zoom issues.
This commit is contained in:
Penar Musaraj 2019-04-15 13:05:43 -04:00
parent af86cf46dc
commit 14eb8eea01
3 changed files with 27 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
app/assets/javascripts/discourse/initializers/ios-input-no-zoom.js.es6 Normal file
View File

@ -0,0 +1,26 @@
// Prevents auto-zoom in Safari iOS inputs with font-size < 16px
const originalMeta = $("meta[name=viewport]").attr("content");
export default {
name: "ios-input-no-zoom",
initialize() {
let iOS =
!!navigator.platform && /iPad|iPhone|iPod/.test(navigator.platform);
if (iOS) {
$("body").on("touchstart", "input", () => {
$("meta[name=viewport]").attr(
"content",
"width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
);
});
$("body").on("focusout", "input", e => {
if (e.relatedTarget === null) {
$("meta[name=viewport]").attr("content", originalMeta);
}
});
}
}
};

7
app/assets/javascripts/discourse/lib/lightbox.js.es6
View File

@ -6,7 +6,7 @@ export default function($elem) {
if (!$elem) {
return;
}
const originalMeta = $("meta[name=viewport]").attr("content");
loadScript("/javascripts/jquery.magnific-popup.min.js").then(function() {
const spoilers = $elem.find(".spoiler a.lightbox, .spoiled a.lightbox");
$elem
@ -24,10 +24,6 @@ export default function($elem) {
callbacks: {
open() {
$("meta[name=viewport]").attr(
"content",
"width=device-width, initial-scale=1.0"
);
const wrap = this.wrap,
img = this.currItem.img,
maxHeight = img.css("max-height");
@ -41,7 +37,6 @@ export default function($elem) {
});
},
beforeClose() {
$("meta[name=viewport]").attr("content", originalMeta);
this.wrap.off("click.pinhandler");
this.wrap.removeClass("mfp-force-scrollbars");
}

12
app/assets/javascripts/discourse/lib/mobile.js.es6
View File

@ -36,18 +36,6 @@ const Mobile = {
// localStorage may be disabled, just skip this
// you get security errors if it is disabled
}
// Sam: I tried this to disable zooming on iOS 10 but it is not consistent
// you can still sometimes trigger zoom and be stuck in a horrible state
//
// let iOS = !!navigator.platform && /iPad|iPhone|iPod/.test(navigator.platform);
// if (iOS) {
// document.documentElement.addEventListener('touchstart', function (event) {
// if (event.touches.length > 1) {
// event.preventDefault();
// }
// }, false);
// }
},
toggleMobileView() {