Tag Archives: iOS

A passable but imperfect solution for full-bleed background images on Android and iOS

I’m working on a site right now that has a fixed, full-bleed (i.e. background-size: cover) background image on the <body>. The content flows over it, mostly obscuring it completely, but the background is occasionally revealed in the spaces between content blocks. Some blocks have a semi-transparent background so you can see the fixed background as if through frosted glass.

Here’s the CSS:

body {
  background: rgb(255,255,255) url('../images/ui/body_bg.jpg') center center no-repeat fixed;
  background-size: cover;
}

It’s a cool effect, but it really, really does not want to play nicely on mobile. Various odd things happen on both Android and iOS, and they are completely different.

Quick side note: Yes, the background image is a JPEG. Normally I only use PNG or SVG images in UI elements, but I had good reason to use JPEG here: even though it’s only two colors (with some in-between colors due to antialiasing), the pattern in the background is incredibly complex, and a JPEG version of the file is about 1/5 the size of the PNG. And since it’s an illustration, I tried making an SVG version first, but the pattern is so large that the SVG was about 2 MB! So JPEG it is… which may be a factor in the issue I’m having on Android, but I haven’t tested a PNG version of the image to verify that.

iOS Problems

I’m an iPhone user, so I mainly test responsive sites on iOS. I do own an Android phone (a Motorola Moto E, which I highly recommend as a cheap-but-decent Android phone for testing), but I generally only break it out during the final round of browser testing prior to launching a site.

The issues with background images on iOS are well-known to most web developers. iOS has a number of rather arbitrary seeming limitations imposed upon the Mobile Safari browsing experience, generally for one of three reasons: 1) performance, 2) touch interface usability, 3) the whims of the ghost of Steve Jobs. In the case of background images, background-attachment is not supported. I’m not really sure how this would impact either (1) or (2) — although I think with the early underpowered iPhone generations, it did impact performance — so I think we’re dealing mostly with (3) here. At any rate, because you can’t have an attached background on iOS, I added this in my media queries:

@media screen and (max-width: 782px) {

  body {
    /* For background handling on iOS */
    background-attachment: scroll; background-repeat: repeat;
  }

}

Another quick side note: Why is my phone break point at 782 pixels, you ask? Because that’s where WordPress has its break point for the admin interface. I’m not exactly sure why the WP team chose that number, but why fight it?

Besides the background attachment, there’s also the issue that background-size: cover on a phone is going to make the background image huuuuuuuuuge because it’s scaling it to fit the height of the page content, not the screen size. I initially solved that with background-size: 100%;, since we’re now allowing the background to repeat. As you’ll see, however, that led to problems on Android, so I ended up scrapping it.

Android Problems

Yes, Android has problems. Don’t even get me started! But I wasn’t prepared for this.

I opened the page in Android, and, although the background image was displaying as I expected in terms of size and attachment, it looked… awful. The original source image I am working with is a generous 2400 x 1857 pixels, enough to look reasonably sharp on most displays, even at high resolution. And it looks great on my Mac, great on my iPhone. But on the Android phone it was splotchy and low-res looking… like it had been reduced to 200 pixels and then upscaled (which is maybe what Android is doing, somehow… and here is where I’m wondering if the image being a JPEG is a factor, but that’s just a stab in the dark).

I tried a number of possible solutions, the most obvious being to set exact pixel dimensions for the image. I tried 1200 x 929, basically a “x2” size for high-res devices. Still looked like crap. I even tried setting it to 2400 x 1857, the actual dimensions of the image, and it looked like crap… and I don’t mean pixel-doubled, which is what it actually should be; I mean the same splotchy weirdness I had been seeing at other sizes.

And then I discovered David Chua’s solution:

html {
  /* For background image scaling on Android */
  height:100%; min-height:100%;
}

Yet another quick side note: Here I am not placing this inside a media query. We don’t want to only fix this issue on phone screens. Granted, the iOS solution above needs to work on iPads, too… something I haven’t really solved here. I’m workin’ on it!

This change for Android worked perfectly! By this point I had, temporarily at least, removed the iOS workarounds I mentioned above, so on Android the background image was not only perfectly scaled to the browser window, looking sharp and clean, but it was even fixed-position, just like on desktop!

But… the image was back to being huuuuuuuuuge on iOS. Apparently this html trick for Android does absolutely nothing on iOS, so you’re left trying to find another solution that won’t simultaneously break Android.

An uneasy compromise

It’s not perfect, but I found that if I put both of these tricks together, everything works… the only thing we lose is the fixed-position treatment that Android allows but iOS does not. But the background looks great on both platforms and most importantly, behaves consistently on both.

Here’s the complete code I’m rolling with, for now:

html {
  /* For background image scaling on Android */
  height:100%; min-height:100%;
}

@media screen and (max-width: 782px) {

  body {
    /* For background handling on iOS */
    background-attachment: scroll; background-repeat: repeat;
  }

}

As noted above, this doesn’t really address iPads. A simple solution would be to change the media query to @media screen and (max-width: 1024px), but a) that doesn’t account for the larger iPad Pro and b) it also means a desktop display will lose the proper background effect if the window is smaller than that size. I don’t really have a solution; an adaptive treatment using either server-side or JavaScript-based browser detection would be a consideration, but I don’t really like resorting to that sort of thing for something as basic as this.

It doesn’t help that I recently gave my iPad to my daughter so I don’t currently have a tablet of any kind for testing. That’s about to change as I have a newly ordered Kindle Fire arriving today, but of course that’s not going to give me the answer for an iPad. I can try Responsive Design Mode in desktop Safari, but that’s not always a perfect representation of the quirks of an actual mobile device.

Still… this combined solution for phones is an improvement over the default behavior in both cases.

It’s totally crazy, but I think I want to buy an iPhone 5c… now

topic_iphone_5cNext Tuesday, Apple will be announcing the iPhone 6. Supposedly they’re also announcing an “iWatch” or whatever. The latter is still shrouded in mystery but it really seems like we already know everything there is to know about the iPhone 6.

And honestly… I’m not sure I want it. Thinner? Yes, that would be great. That’s always great. But it’s not like my iPhone 5 is “thick.” Bigger screen? I guess. I’m fine with the size of my iPhone 5 screen, and I don’t want a larger slab to carry around in my pocket. Faster processor? Who would say no to that? Although to be completely honest, my iPhone 5 seems perfectly snappy to me.

So, yeah… I’m pretty happy with my iPhone 5. In fact, there’s only one reason I’m even interested in getting a new phone at all when my contract runs out this month. About a year and a half ago, I dropped my iPhone 5 on asphalt, and dinged the corner right by the camera. Since then, the inside of the camera lens has gradually accumulated dust, to the point where my photos are noticeably blurry, washed-out, and occasionally infested with weird splotches.

Would I be happy replacing my iPhone 5 with another iPhone 5? Yes. I’d be perfectly happy with that. But they don’t sell the iPhone 5 anymore. Instead they sell the iPhone 5c, which is basically the exact same phone but in a cheaper-to-produce (and possibly more resistant to the kind of damage mine suffered) plastic casing. And it comes in bright colors.

I want one. I want the obnoxious yellow one. And I’ve wanted it almost since they came out. For me, the only thing the iPhone 5s had going for it over the 5c was the A7 processor. But, again, I haven’t had any problems with the performance of the 5’s A6 processor.

So, I am left with a strange quandary. I am sure any of my fellow Apple fans will think I am an idiot (or worse) for seriously considering buying an iPhone 5c (actually, two of them) right now, on the cusp of the big iPhone 6 announcement. But here I am.

Apple always has three iPhone models available: the latest-and-greatest (currently the 5s), the last-year’s-model (in this case the 5c, a modified 5), and the two-years-old-model (the 4s). I am wondering what Apple is going to do with their new low-end phone after next Tuesday. Right now it’s the aging 4s, which will be discontinued. That would generally mean it’s time for the 5c to drop into that spot. If I wait until then, I might be able to get a 5c for “free” (“subsidized” by the carrier)!

But… the lowest-end model has only ever been available in a 16 GB size. I’ve learned over the years with iOS devices that I can’t really get by with less than 32 GB of storage. Right now the iPhone 5c is available in 16 and 32 GB models. But after next Tuesday, assuming it becomes the low-end model, the 32 GB version might disappear.

And what of the mid-level model? Will the 5s be downgraded to colorful plastic and renamed the 5sc or some other strange appellation? Would I want that instead? (Yes, I probably would, especially since it would most likely still come in a 32 GB version.)

At the moment I am considering hedging my bets, and buying two 32 GB iPhone 5c’s right now. Yes. Buy them. Keep them in the package. And for the love of all that is good in the universe keep the receipt. Then, wait and see. If I actually want something that gets revealed on Tuesday, I could return the 5c’s. If not, I have them.

Am I crazy?

The Outside Scoop: Thoughts on Android Wear and a possible iWatch

The big news in tech today is Google’s announcement of Android Wear, a version of their Android OS specifically optimized for “wearables” like watches.

The tech media is erupting with ridiculously titled blog posts that refer to this as Google’s “answer” to the iWatch, a product that Apple has not announced, nor even acknowledged working on.

Surprisingly, for the first time I actually found one of these wearables mildly interesting, the Moto 360. But I am still skeptical of wearables in general, smart watches in particular, and especially the idea that Apple is working on one. But I’ve learned from my past mistakes, when I was convinced Apple was neither working on a smartphone in late 2006 nor a tablet in late 2009. So, in my world at least, my adamant belief that Apple is not developing a watch should probably be my biggest clue that they are.

So where is Apple’s “iWatch”? Aren’t all of these competitors eating Apple’s lunch (before it’s even cooked)? Perhaps. But consider this:

Remember the original iPod. It came into a market that already existed (but sucked), and delivered a radically superior user experience, and was a huge hit. Remember the iPhone. Once again, it came into a market that already existed (but sucked) and totally revolutionized it.

The thing is… a smart watch market doesn’t really exist (or didn’t when rumors of an “iWatch” first started to circulate). It almost seems like Apple got the wheels of the rumor mill turning deliberately, to goad their competition into creating the market, thinking they were beating Apple to the punch but in fact creating the exact environment of suck Apple needs to release a product into.

What’s so Neue about Helvetica?

fonts
So, I was just reading Rani Molla’s post on GigaOM called What’s all the fuss about Apple and Helvetica Neue? and I felt compelled (as I so often do, about so many things) to comment on the issue here.

Contrary to how the GigaOM article seems to frame it, the controversy — the, if you will, fontroversy (I regret it already) — when Apple demoed iOS 7 at WWDC last month was not that they were switching to Helvetica Neue as the iOS 7 system font. It’s that they were switching to Helvetica Neue Ultra Light, a particularly delicate weight of the general Helvetica Neue font family. (I’ve read some things that suggest they’re reversing course on that decision based on developer feedback, but the GigaOM post doesn’t even touch that.)

The fact is, Helvetica Neue has been the iOS system font ever since the introduction of the iPhone 4. When the iPhone was first introduced, it used plain old Helvetica as the system font. But with the introduction of the Retina Display, Apple switched to the slightly more refined Helvetica Neue.

So the concern with iOS 7 is not Helvetica Neue itself — that’s been working out just fine. It’s this extra thin weight of the font, which becomes difficult to read at smaller sizes.

Personally I like Helvetica Neue Ultra Light. I think it continues the trend towards refinement Apple began with the switch to Helvetica Neue itself, and is demonstrated effectively in Cabel Sasser’s animated GIF featured in the GigaOM article. The version using Helvetica Neue Regular feels heavier and clunkier to me. That said, I do understand and appreciate the legibility concerns with Ultra Light at very small sizes.

I’m not sure how this will work itself out. I doubt Apple will switch to a different typeface, though they may increase the weight of the font in the final version of iOS 7. But part of the reason Apple went with Helvetica in the first place is that it’s neutral (at least in principle). It gets out of the way and isn’t distracting. It doesn’t convey any particular personality. It’s a “blank canvas” of a font, which makes it a perfect fit for iOS devices, where the device itself disappears and becomes the app you’re using. Developers don’t have to use the system font in their apps, but a lot of them do, and by keeping the system font as neutral as possible, Apple avoids predisposing apps to a certain personality or style.

This is exactly the opposite of the opinions expressed in the closing of the GigaOM article, and is I think the opposite of Apple’s intentions with the iOS experience. Using a custom font that “reinforces a more distinctive brand voice” would be the equivalent of sticking a big Apple logo on the front of the iPhone. Apple’s branding goes on the back (where it can be an effective marketing tool). It’s never a part of the user experience.

Defense Against the Dark Arts (of iMessage Configuration)

Ever since upgrading to iOS 6, I’ve had a problem. The glorious promise of iMessage with its seamless integration of SMS/MMS and Apple’s messaging services between iPad, iPhone and Mac has mostly worked, with one infuriating, deal-breaking exception.

Texts to my phone number go to my iPad and not to my iPhone.

Look, all of this integrated messaging is cool. Being able to have text messages show up not only on my phone but on my other devices is awesome. But they have to at least show up on my phone or the whole thing is a failure.

I’ve researched the problem and found some people with somewhat similar issues, lots of stuff involving jailbroken iPhones (which mine is not), etc. but no clear answers to my exact problem. Several people in forums suggested shutting off iMessage on the various devices, deleting accounts, full-blown factory restore, you name it. All of which were either things I tried and found didn’t work, or wasn’t willing to try due to the amount of time and tedious work involved.

iMessage SettingsSo I began experimenting. There was one distinct problem I could see in settings. On both iOS devices and my Mac, the Messages app was showing both my phone number and email address. But in some cases one was grayed out. Infuriatingly, on my iPad and Mac, the phone number was grayed out and checked, and on the iPhone the phone number was grayed out and not checked. I could easily add or remove the connection of my email address to any of the devices, but my phone number was stubbornly locked into my iPad only. (Or, well, my iPad and my Mac… I guess. Honestly I hardly ever use Messages on my Mac so I haven’t really paid attention.)

I wish I could give a clear account of what came next, but I started tapping various buttons and clicking various boxes with such a fury that it all became a blur. What I do remember is that I clicked the checkbox next to my email on my Mac, which un-grayed the phone number. I was then able to uncheck the phone number, and the email now became grayed out.

So, if I understand correctly, the way iMessage settings work, at least one receiving phone number/email address must be checked at all times, so if only one is checked, it’s also grayed out so you can’t uncheck it. Then, if you check the other one, you may be able to uncheck the first.

That wasn’t working on my iPhone, however. Strangely though (at least as I recall from the aforementioned blur), when I repeated the process from my Mac on my iPad, then took a look at my phone, it was already switched to having the phone number checked and grayed out.

So then I began running some tests. This is where things get muddy, and since all of this just happened a few minutes ago, I still may not have a complete solution. I tried sending a text to my phone number from SLP’s iPhone. Never got it. Then I tried sending a text to my phone number from my iPad and it went to my phone within seconds. Cool. Then I tried sending a text to my email address from SLP’s iPhone, and it immediately showed up on all three of my devices.

Everything then is working as expected except that I did not get the text from SLP’s iPhone to my phone number at all, on any device. It’s hard to say what that’s all about. Are things working now? I don’t know.

Here’s another weird thing to throw into the mix. SLP and I share an iTunes Store account, but we have separate iCloud accounts. I also have a separate iCloud account apart from the iTunes Store account. The iTunes Store account uses my “real” email address, and I have a separate me.com email address I use on iCloud. So that’s all kind of a big mess, yes I know. Anyway, whenever I made these various changes to my configurations, the iOS devices would pop up alerts regarding the change. These alerts also appeared on SLP’s iPhone, even though her Messages settings don’t have any of my account info associated with them.

The bottom line here, for me, is that Apple really has not dealt with the reality of multiple users on the same device, multiple family members sharing an iTunes Store account but needing their own iCloud accounts, etc. They may be trying to deal with it all, but they’re trying to integrate too many things that had developed for too long as independent products. And they’re not having as much success at it as they think they are.

This post began as many others here do, as an attempt to share my solution to an Apple conundrum. Unfortunately in this case I just can’t quite make sense of what’s happening, and it seems to be one of those dark-clouds-on-the-horizon portents of more trouble to come with Apple’s tendency for its ambitions to exceed its capabilities in the realm of networked services.

I just want it to work. Isn’t that the Apple promise?

Follow up: Just after posting this I had our neighbor — who also has an iPhone but of course does not share our iTunes/iCloud accounts — send a text to my phone number, and I got it. So the problem seems mostly resolved. But let’s leave it at this: if you share your iTunes Store account with another family member and you both have iPhones, you might need to send your text to each other’s email addresses instead of phone numbers, if you’re running into the same problems I’ve been having.