Recently we have created new version of mobil.aftenposten.no but soon after serving it to some users we spot this tweet: https://twitter.com/Al3x4nd3rR/status/452047498111369216. Basically titles were missing....

Then it started our effort to reproduce this bug.

...

It was nightmare!

First how to reproduce it:

1. Open http://krzychukula.github.io/vw_bfcache/ in Mobile Safari.
2. Click "Go to another page" link
3. Leave phone for 60 seconds (longer is better)
4. Click back button
5. If you were lucky you should see some missing paragraphs and missing green boxes.

How it looks:

Bug:
This one uses vw and vh for font-size. Both are 0 so we can see only 2 from 8 paragraphs. Those two are using only em for font-size.

I was curious if it's only for font-size so I have added another test.

I have added two boxes with width and height set in vw and vh with green background color. They parents have red background for contrast.

Most of the time it works fine but from time to time (the same steps to reproduce as earlier) you can see something like this:

Explanation: #

What I think is happening here is bug in vh, and vw when page is loaded form "Back-Forward Cache" or 'bfcache" (more about bfcache) AND it's unloaded from memory (just guessing here) Safari is losing viewport dimensions for those css units. 

Important thing about reproducing this bug is that not all pages will be affected. First it must be cacheable. If you are setting "no-cache" headers, short Expires etc. then you may not be affected. Our page html was has only 60s Expires. It never happened to us during development and testing but happens to our users from time to time. 60s is really short caching time and it's still affecting us.

The worst thing about this bug is how easily it can go through all of your tests and still make your site broken for your users.

How to deal with it #

1. Easiest one is probably don't use vw and vh units until it's fixed. Especially if you want back/forward cache to work for your users.
2. Invalidate bfcache. Easiest way to do that is to set empty onunload="" on body tag. See preventing cache on back button

I could reproduce this bug only in Mobile Safari, if you are lucky with other webkit browser please let me know as I have only send bug report to Apple.

Bug report id: 16632856

BTW. There are more viewport bugs in iOS7: http://blog.rodneyrehm.de/archives/34-iOS7-Mobile-Safari-And-Viewport-Units.html

Feedback or Comments?

← Home

Want to learn more?

Sign up to get a digest of my articles and interesting links via email every month.