New blog domain: kula.blog

By K -
It's still work in progress but new posts will be published on  https://kula.blog/ Thanks to 11ty base blog RSS is working from the start so it should be easy to add to your reader if you still use any :) If now then I hope you can sign up to the newsletter where I'll be publishing new posts and interesting articles to it from time to time. Please use  kula.blog  from now on.
Post a Comment

Safari Mobile CSS VW and VH units bug.

By K -

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

Comments

Post a Comment

Comments:

Popular posts from this blog

How to simulate slow connection (developer proxy in Node.js)

By K -
Image
Update: If you use Chrome then you can use "Throttling" so simulate slow network for all your assets. This should be easier than proxy. Toggle device mode   Choose Network type. Refresh the page https://developer.chrome.com/devtools/docs/device-mode  Proxy: For some time I wanted to use some proxy for development and testing of eg. slow internet connection, but it was hard to find something useful and free. I know there is Charles but buy it to use it at most one in a month is not for me. I started thinking about Node.js, maybe I can write proxy for me? But fortunately I found one. https://github.com/nodejitsu/node-http-proxy With this module I can write really short code to create slow server: var http = require('http'), httpProxy = require('http-proxy'); httpProxy.createServer(function (req, res, proxy) { var buffer = httpProxy.buffer(req); setTimeout(function () { proxy.proxyRequest(req, res, { host:
Read more