8

CircleKSunkus and CSS Zoom

 3 years ago
source link: https://miketaylr.com/posts/2015/05/circleksunkus-dot-jp-zoom.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
CircleKSunkus and CSS Zoom

CircleKSunkus and CSS Zoom

11 May 2015

In this, the Nth installation of the Weird World Wide Web Websites series we take a look at circleksunkus.jp, purveyor of fine Japanese soft drinks and snacks.

If you load this site on a Firefox mobile browser you might think you’re up against some old -webkit- prefixed flexbox code. Or maybe one of those fun edgecase float differences between WebKit and Gecko.

screenshot of circlesunkus.jp website

But nope, it’s even weirder.

//viewport
$(window).bind('resize load', function(){
	$("html").css("zoom" , $(window).width()/640 );
});

They’re using IE’s olde non-standard CSS zoom property (that WebKit implemented back in the Safari 4 days) to retrigger a zoomed out layout on page load, which leads to a pretty harsh Flash of Un-Zoomed-Out Content (FOUZOC) if you’re on a third world internet connection (like the ones we have here in Texas).

Anyways, if you happen to work on circlesunkus.jp, here’s how to do this the right way™:

<meta name="viewport" content="width=640">

More info in the webcompat bug.


About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK