Viewport madness

All timestamps are based on your local time of:

Posted by: stak
Tags: mozilla
Posted on: 2012-04-26 22:32:41

One of the things I've been working on for the last while is the integration between the Fennec front-end and the core graphics APIs. One of the main problems in this kind of work is having to deal with multiple different coordinate systems and units of measurement. For coordinate systems, we have:

  • the page, which is the area determined by the content being rendered
  • the screen, which is determined by the physical hardware the user has
  • the viewport, which is the part of the page the user sees on the screen
  • the displayport, which is the area Gecko is actually rendering to graphics buffers
  • the CSS viewport, which is the base relative to which some content dimensions are calculated

For units of measurements, we have:

  • device pixels, whose size is fixed by the hardware
  • CSS pixels, which can grow or shrink relative to device pixels depending on the zoom
  • app units, which are what Gecko uses internally for layout calculations, and are 1/60 of a CSS pixel

With all these different frames of reference and units of measurement it sometimes gets pretty hard to keep it all straight. As a tool to help me visualize this, I wrote a simple SVG file that lets me quickly simulate certain behaviours. The SVG file shows a device overlaid on top of a screenshot of, and allows you to drag around the device so that you can see how the viewport and displayport might change. It also allows you to simulate zooming in and out (using the '-' and '+' keys) and asynchronous panning (use 'p' to pin/unpin the displayport).

You can find the SVG file here (warning: it loads a ~1.5MB CNN screenshot). Feel free to play around with it, or hack it up to suit your own needs!

Posted by Robert O'Callahan at 2012-04-26 23:38:19
Very cool. However, zooming in and out don't work for me.
[ Reply to this ]
Posted by db48x at 2012-04-27 01:26:31
Shiny. Zooming in and out works for me (plus and minus keys on the keyboard.)

I'm afraid it doesn't work very well when layout.css.devPixelsPerPx is 2. Some things are scaled twice, and the viewport overlaps and hides the device until you drag it around. Very interesting :)
[ Reply to this ]
Posted by stak at 2012-04-27 07:29:32
That's interesting. I can reproduce it but I'm not sure offhand why that would be - assuming things are just scaled up by a factor of two in Gecko it should behave pretty much the same.
[ Reply to this ]
Posted by db48x at 2012-04-27 19:39:56
It should just work but apparently something is being scaled twice by accident. The scale factors have to be inserted manually by the programmer, and this isn't easy to catch in testing or review, since the default scale factor is 1.0 so everything still comes out right. :)
[ Reply to this ]
Posted by FloB at 2012-04-27 04:44:44
Will CSS Device Adaption[1] be included in Fx/Fennec?

[ Reply to this ]
Posted by stak at 2012-04-27 07:30:49
Eventually, sure. It looks like the spec isn't quite ready for implementation yet. However, Fennec does support the meta-viewport tag reasonably well, so you should be able to accomplish most, if not all, of what you'd like to do with it.
[ Reply to this ]
Posted by FloB at 2012-04-29 11:15:24
Great. I'd rather see it sooner than later ;-). It also covers the <meta> viewport solution, thus implementing CSS Device Adaptation is IMHO the way to go™.

Please note that Opera / Presto 2.8[1] and IE10 incl. Metro[2] already implemented this specification.

[ Reply to this ]

[ Add a new comment ]

(c) Kartikaya Gupta, 2004-2021. User comments owned by their respective posters. All rights reserved.
You are accessing this website via IPv4. Consider upgrading to IPv6!