Baptiste Briel baptistebriel

iOS9 returns double the value for window.innerWidth & window.innerHeight
The versions that are concerned are: 9.0.0, 9.0.1, 9.0.2

A few people got mad on twitter:

window.innerWidth in iOS 9 Safari returns double the number it did in iOS 8? Is this real life? tell me no — @rachsmithtweets

iOS9 Safari has the most insane bug where window.innerWidth / innerHeight is *sometimes* twice as large as it should be. ughhhh. !? — @mattdesl

iOS9 innerWidth/innerHeight is having a lot of fun these days — @ayamflow

The issue:

..mobile browsers will wait approximately 300ms from the time that you tap the button to fire the click event. The reason for this is that the browser is waiting to see if you are actually performing a double tap.

(from a new defunct https://developers.google.com/mobile/articles/fast_buttons article)

touch-action CSS property can be used to disable this behaviour.

touch-action: manipulation The user agent may consider touches that begin on the element only for the purposes of scrolling and continuous zooming. Any additional behaviors supported by auto are out of scope for this specification.

mostly in the realm of creative coding and graphics programming

lots of these are my own :)

mouse/touch events

https://www.npmjs.org/package/wheel
https://www.npmjs.org/package/scroll-speed
https://www.npmjs.org/package/mouse-position (useful for delta)
https://www.npmjs.org/package/touch-position (same idea, but for unified mouse/touch)

	vec2 uvRotate (vec2 baseUv, float angle, vec2 center) {
	vec2 uv = baseUv;
	uv -= center;

	mat2 m = mat2(cos(angle), -sin(angle), sin(angle), cos(angle));
	uv = m * uv;

	uv += center;

	return uv;

	uniform sampler2D tex;
	varying vec2 vUv;

	void main() {

	gl_FragColor = texture2D( tex, vUv );

	}

	var vs = document.getElementById('vs').textContent;
	var fs = document.getElementById('fs').textContent;
	var canvas = document.querySelector('canvas');
	var ctx = canvas.getContext('experimental-webgl', {
	alpha: false,
	antialias: true,
	premultipliedAlpha: false,
	stencil: true
	});