Prevent mobile browsers from zooming on all form inputs

This patch will set the font-size to 16px in mobile for both Seven and Bartik themes. I have also made the selector in CKEditor's CSS more specific, because it was overridden with plain body selector.

I believe the whole idea of using 16px is to tell the browser to use it strictly without scaling or zooming. That value was already used in the css file, I just made the selector more specific so that it won't be overridden by elements.css.

Here is another patch which unifies the selectors.

@mErilainen - I agree with #3, changing status to RTBC.

Thanks for the Investigation :)

So, let's try with em values then.

1. +++ b/core/modules/ckeditor/css/ckeditor-iframe.css
   @@ -1,18 +1,18 @@
   -body {
   +.cke_editable {
   ...
   -  body {
   ...
   +  .cke_editable {
   

   Why these selector changes?

2. +++ b/core/modules/ckeditor/css/ckeditor-iframe.css
   @@ -1,18 +1,18 @@
   -  font-size: 15px;
   +  font-size: 0.9375em;
   

   This feels very brittle.

   Won't this only yield the desired effect in Seven?

3. +++ b/core/modules/ckeditor/css/ckeditor-iframe.css
   @@ -1,18 +1,18 @@
   -  /* A font-size of 16px prevents iOS from zooming. */
   ...
   -    font-size: 16px;
   

   Why did this not work?

All of your questions have answers in the comments. I'm not experienced core contributor, should I summarize the changes in the description? There aren't that many comments though, yet...
1. CKEditor's ckeditor-iframe.css's plain body selector is currently overridden by elements.css (which comes from Bartik theme, it should be Seven when editing content, right?), which reduces the font-size to under 16px, which in turn makes at least iOS Safari to use auto zoom. Don't know why though.
2. Lewis preferred the use of ems instead of px values, and that is the equivalent to 15px, at least when using Seven.
3. See #2.

AFAICT none of those 3 things were actually said before? In any case: thanks!

1. Then let's A) use body.cke_editable, because nested editables may also use .cke_editable, B) document why this more specific selector is necessary.
2. Sorry, I meant to say Bartik, not Seven.
   AFAICT Lewis only asked for em in Bartik's CSS (see #2), not in ckeditor-iframe.css. Lewis, can you chime in here?

1. Generally speaking, yes. But this is not a general case. This is an extremely special case. This is for the <body> tag that CKEditor uses in its <iframe>. As I said, CKEditor may actually use the .cke_editable class in a nested manner, so using just the .cke_editable class is dangerous, because it may end up styling unintended elements too!
2. Okay. But, again, this is a very special case. This CSS is owned by ckeditor.module. Which means it will run in all themes. So, we need the solution that works always, regardless of theme, and thus regardless of other CSS.
   I don't know CSS well enough to be able to say which solution is best to guarantee 16px regardless of theme. But whichever one that is, is the one that should be used.

In short: the normal rules don't apply, just like they don't apply to Toolbar. Because both Toolbar and CKEditor appear in many themes, and Toolbar must always look the same, and so should CKEditor iframe instances. (It is up to themes to specify ckeditor_stylesheets in their .info.yml files to override the defaults, which Bartik already does.)

Here is a new patch which doesn't touch the font-sizes of CKEditor CSS, it only has the more specific selectors.

+++ b/core/modules/ckeditor/css/ckeditor-iframe.css
@@ -1,7 +1,8 @@
+ * that it won't be so easily overriden in theme CSS.

Nit: s/overriden/overridden/

Leaving at NR for Lewis.

Fixed typo.

Indeed, thanks! :)

Failed due to a known random fail.

Same random fail again. DrupalCI is green.

This is a CSS-only patch, which further proves this is a random failure.

Why are we using px in ckeditor and em in Bartik?

Also could the 1.2307em comment explicitly mention ios? If I google '16px IOS' I get results referring to this magic number. If I google 1.2307em IOS not so much.

Why are we using px in ckeditor and em in Bartik?

AFAIK because Bartik is a theme and chooses to be em-based, whereas the CKEditor iframe CSS is not a theme at all, it's for an iframe after all. The CKEditor iframe CSS is loaded in every CKEditor iframe (non-inline) instance. However, front-end themes can optionally specify "CKEditor stylesheets", to make the CKEditor iframe instance's styling match that on the front-end as closely as possible.

16px is indeed "the magic number".

1.2307em is just the value that is relative to the other em-values in Bartik (container elements' em-value all affect this one; this is the magical value that then corresponds to 16px).

But I'm sure LewisNyman will explain them em-stuff ten times better :)

16px is indeed "the magic number".

1.2307em is just the value that is relative to the other em-values in Bartik (container elements' em-value all affect this one; this is the magical value that then corresponds to 16px).

Right this is the bit I think needs documenting in once place. So it goes straight from 1.2307em = 16px = magic number for IOS zooming. Not 1.2307em = "no mobile zooming" with no explanation as to why.

Also is 16px a magic number on Android too? Was Android tested?

There are only two popular hacks to prevent browser scaling for inputs - magic 16px font-size and disabling user scaling.
As 16px is not ok I tried to change viewport.

This is good solution and it will fix a lot of different bugs on mobile.
And we must be sure that mobile view is comfortable for all people, because it will remove possibility scaling website.

Also disadvantage of this method it don't supporting Android default browse version < 4.2.
And, please, correct "user-scalable: 0" to "user-scalable: no")

I'll be working on that during #Drupalcon2015 Barcelona

Made the change, implemented font-size:1.2em (to keep using ems). The previous patch was blocking the general zoom of the site blocking the viewport.

I'm going to review this issue in DrupalCon mentored sprint

I reviewed patch in comment #36 and noticed it didn't work at least on login form as it's keeps zooming the view as I move focus to input field.

fixed again, using em's somehow forces the device to zoom, so font-size is 16px. Pending for review.

The container (div etc) and the font's scaling effects the final font size so in this case 1.2em isn't sufficient to prevent the zoom.
The patch in #16 was pretty solid so might be worth using as a base. It used 1.2307em rather than 1.2em and prevents input zoom on seven, bartik and CKEditor input forms. As far as I understood, it needed some documentation and testing on Android.

Because the changes from #16 are used for the ckeditor in the admin panel. The changes in the #39 are for the client side theme. Again, em's are not quite usefull for mobile devices, better to put fixed pixels

Please once again, review and test :)

I also tried with rems and it still zooms (at least i tested in an iPhone 6 Plus), but tested at DrupalCon Barcelona with 16px and it doesn't zoom in any device, so, I think that could be nice if someone test the patch, and make the final review to it.

thanks!

Discussed with @xjm and given the discussion on-issue and the fact this is a usability improvement that improves mobile forms I think it is okay to commit at this late stage. Credited the UMN 2015 team too.

Committed ab90199 and pushed to 8.0.x. Thanks!