Skip to main content

Safari Mobile CSS VW and VH units bug.


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



Comments

Popular posts from this blog

Course Review: The Bitfountain iOS 8 with Swift Immersive

This is second big iOS learning project. For first one read iOS Programming book review. As I only have two of them done I have to compare them somehow.

I am mindful that it took me a really long time to finish it (since last autumn). For a couple of months this year I didn't even have the internet to learn it, so it could not be helped. But last half of the June I've spent watching the videos every day and managed to finish it before any new internet problems.

So how was it?
In my opinion, it's great if you're starting out. There are a lot of basics, and seeing how to do things in XCode just makes your learning much easier than looking at the photos in the book. On the other hand, learning is more shallow and it is much easier to just follow the videos and learn only the basics without bigger picture about iOS SDK. I somehow missed more challenging exercises (even though I don't like to do them ;)

Length:
Course it pretty long but many videos are quite short (1-2…

How to Learn when Life is Short

I haven't really think this through but I have read really interesting articles recently and I just wanted to write for myself later.

Life is Short by Paul Graham

It's just that, learn from people older that you what is most important, and that life actually is short...

Instead of Goals or Resolutions, Try Creating Rules by Leo Babuta

In the time of New Year Resolutions, it's good to read something that is proposing different way of achieving things. Still I see much more value in habits than setting goals. But...

The Easy Way To Learn Hard Stuff by Per Harald Borgen
It's something that I read from time to time and I know it works sometimes for me. The things I learn then are really learned and something Jakub Wasilewski  has told me many times to do. Still it's uncomfortable and for some reason, I have failed to use this method more than once or twice. Writing it here so maybe I can think about it more and figure out how to do that more often.

Towards an understandin…

Hero's Journey in Presentations

Artur Skowroński recommended me: Want a Better Pitch? Watch This. by Andy Raskin and I think it is so great and applicable to all kinds of talks that I want to help it get more popular.
So the plan of presentation is going to follow these steps: Enemy - ProblemWhy now? - call to actionShow how the world will look like without the problemProblemsEvidence that you fixed the problem The image at the top is because it reminds me of Hero's Jurney. It has fewer steps but there is a lot of similarities. Especially #3 made me realize that grand vision of the future is something that I should have used in my talks.  The result at the start of the presentation makes a lot of sense actually. Everyone already knows that I speak about something because I probably fixed it and if you tell about it at the end then it might be hard for some people to see the bigger picture in the solution you're going to present.