BUG: SM16 Webmail on Safari iOS
Problem reported by Shaun Peet - May 29, 2017 at 5:22 AM
When using the webmail on an iPhone there's an annoying little glitch which is easy to fix with a couple lines of CSS.  Basically, Safari on an iPhone will zoom any input field when it detects that the font-size of that field is less than 16px.  The downside of this is that for SmarterMail it throws off the layout a bit, and because it's a SPA the zoomed-in look persists until the user zooms out manually.
In my own responsive designs I've added the following CSS to prevent this behaviour:

@media screen and (-webkit-min-device-pixel-ratio:0) {
  select, textarea, input { font-size: 16px !important; }
    select:focus, textarea:focus, input:focus { font-size: 16px !important; }
Which is taken from this answer / discussion on StackOverflow:
In the above CSS, I've removed the setting of the background-color on focus which was in the answer provided on StackOverflow which I figured SmarterMail wouldn't want to do because of your themes.

5 Replies

Reply to Thread
This bug still exists in Version 16.0.6369 (June 9).
This is one of those low-hanging fruit type of fixes that I'm hoping can get rolled into the next update.  Just a simple CSS tweak would greatly increase usability when using Safari on iOS.
Any chance this makes it into today's release?
Just tried on my iPhone and unfortunately this still exists in Version 16.0.6376 (Jun 16, 2017).
This still exists in version 16.0.6390 from June 30.  The little zooming that Safari on iOS does ironically creates usability issues because in a SPA like SM16 it doesn't zoom back out after the textbox loses focus.
Note - this happens on the login page which can be used for testing.
This still exists in version 16.1.6411
Please add those couple lines of CSS mentioned at the very top of this thread.  Thanks!

Reply to Thread