diff --git a/src/compile/nodes/Binding.ts b/src/compile/nodes/Binding.ts
index c282cf1a9d..e0f928ccfa 100644
--- a/src/compile/nodes/Binding.ts
+++ b/src/compile/nodes/Binding.ts
@@ -6,6 +6,7 @@ import flattenReference from '../../utils/flattenReference';
 import Compiler from '../Compiler';
 import Block from '../dom/Block';
 import Expression from './shared/Expression';
+import { dimensions } from '../../utils/patterns';
 
 const readOnlyMediaAttributes = new Set([
 	'duration',
@@ -14,6 +15,9 @@ const readOnlyMediaAttributes = new Set([
 	'played'
 ]);
 
+// TODO a lot of this element-specific stuff should live in Element —
+// Binding should ideally be agnostic between Element and Component
+
 export default class Binding extends Node {
 	name: string;
 	value: Expression;
@@ -57,7 +61,10 @@ export default class Binding extends Node {
 		const node: Element = this.parent;
 
 		const needsLock = node.name !== 'input' || !/radio|checkbox|range|color/.test(node.getStaticAttributeValue('type'));
-		const isReadOnly = node.isMediaNode() && readOnlyMediaAttributes.has(this.name);
+		const isReadOnly = (
+			(node.isMediaNode() && readOnlyMediaAttributes.has(this.name)) ||
+			dimensions.test(this.name)
+		);
 
 		let updateCondition: string;
 
@@ -103,8 +110,7 @@ export default class Binding extends Node {
 		if (this.name === 'currentTime' || this.name === 'volume') {
 			updateCondition = `!isNaN(${snippet})`;
 
-			if (this.name === 'currentTime')
-				initialUpdate = null;
+			if (this.name === 'currentTime') initialUpdate = null;
 		}
 
 		if (this.name === 'paused') {
@@ -117,6 +123,12 @@ export default class Binding extends Node {
 			initialUpdate = null;
 		}
 
+		// bind:offsetWidth and bind:offsetHeight
+		if (dimensions.test(this.name)) {
+			initialUpdate = null;
+			updateDom = null;
+		}
+
 		return {
 			name: this.name,
 			object: name,
diff --git a/src/compile/nodes/Element.ts b/src/compile/nodes/Element.ts
index a025eb7b05..bb7d71fcd7 100644
--- a/src/compile/nodes/Element.ts
+++ b/src/compile/nodes/Element.ts
@@ -17,6 +17,7 @@ import Action from './Action';
 import Text from './Text';
 import * as namespaces from '../../utils/namespaces';
 import mapChildren from './shared/mapChildren';
+import { dimensions } from '../../utils/patterns';
 
 // source: https://gist.github.com/ArjanSchouten/0b8574a6ad7f5065a5e7
 const booleanAttributes = new Set('async autocomplete autofocus autoplay border challenge checked compact contenteditable controls default defer disabled formnovalidate frameborder hidden indeterminate ismap loop multiple muted nohref noresize noshade novalidate nowrap open readonly required reversed scoped scrolling seamless selected sortable spellcheck translate'.split(' '));
@@ -262,7 +263,7 @@ export default class Element extends Node {
 			parentNode;
 
 		block.addVariable(name);
-		const renderStatement = getRenderStatement(this.compiler, this.namespace, this.name);
+		const renderStatement = getRenderStatement(this.namespace, this.name);
 		block.builders.create.addLine(
 			`${name} = ${renderStatement};`
 		);
@@ -489,13 +490,27 @@ export default class Element extends Node {
 			`);
 
 			group.events.forEach(name => {
-				block.builders.hydrate.addLine(
-					`@addListener(${this.var}, "${name}", ${handler});`
-				);
+				if (name === 'resize') {
+					// special case
+					const resize_listener = block.getUniqueName(`${this.var}_resize_listener`);
+					block.addVariable(resize_listener);
 
-				block.builders.destroy.addLine(
-					`@removeListener(${this.var}, "${name}", ${handler});`
-				);
+					block.builders.mount.addLine(
+						`${resize_listener} = @addResizeListener(${this.var}, ${handler});`
+					);
+
+					block.builders.unmount.addLine(
+						`${resize_listener}.cancel();`
+					);
+				} else {
+					block.builders.hydrate.addLine(
+						`@addListener(${this.var}, "${name}", ${handler});`
+					);
+
+					block.builders.destroy.addLine(
+						`@removeListener(${this.var}, "${name}", ${handler});`
+					);
+				}
 			});
 
 			const allInitialStateIsDefined = group.bindings
@@ -509,6 +524,14 @@ export default class Element extends Node {
 					`if (!(${allInitialStateIsDefined})) #component.root._beforecreate.push(${handler});`
 				);
 			}
+
+			if (group.events[0] === 'resize') {
+				this.compiler.target.hasComplexBindings = true;
+
+				block.builders.hydrate.addLine(
+					`#component.root._beforecreate.push(${handler});`
+				);
+			}
 		});
 
 		this.initialUpdate = mungedBindings.map(binding => binding.initialUpdate).filter(Boolean).join('\n');
@@ -916,7 +939,6 @@ export default class Element extends Node {
 }
 
 function getRenderStatement(
-	compiler: Compiler,
 	namespace: string,
 	name: string
 ) {
@@ -971,6 +993,12 @@ const events = [
 			node.name === 'input' && /radio|checkbox|range/.test(node.getStaticAttributeValue('type'))
 	},
 
+	{
+		eventNames: ['resize'],
+		filter: (node: Element, name: string) =>
+			dimensions.test(name)
+	},
+
 	// media events
 	{
 		eventNames: ['timeupdate'],
diff --git a/src/shared/dom.js b/src/shared/dom.js
index 0eb53585d7..54778d1aaf 100644
--- a/src/shared/dom.js
+++ b/src/shared/dom.js
@@ -193,3 +193,32 @@ export function selectMultipleValue(select) {
 		return option.__value;
 	});
 }
+
+export function addResizeListener(element, fn) {
+	if (getComputedStyle(element).position === 'static') {
+		element.style.position = 'relative';
+	}
+
+	const object = document.createElement('object');
+	object.setAttribute('style', 'display: block; position: absolute; top: 0; left: 0; height: 100%; width: 100%; overflow: hidden; pointer-events: none; z-index: -1;');
+	object.type = 'text/html';
+
+	object.onload = () => {
+		object.contentDocument.defaultView.addEventListener('resize', fn);
+	};
+
+	if (/Trident/.test(navigator.userAgent)) {
+		element.appendChild(object);
+		object.data = 'about:blank';
+	} else {
+		object.data = 'about:blank';
+		element.appendChild(object);
+	}
+
+	return {
+		cancel: () => {
+			object.contentDocument.defaultView.removeEventListener('resize', fn);
+			element.removeChild(object);
+		}
+	};
+}
\ No newline at end of file
diff --git a/src/utils/patterns.ts b/src/utils/patterns.ts
index 8fea930aa6..317a7c1990 100644
--- a/src/utils/patterns.ts
+++ b/src/utils/patterns.ts
@@ -1 +1,3 @@
 export const whitespace = /[ \t\r\n]/;
+
+export const dimensions = /^(?:offset|client)(?:Width|Height)$/;
diff --git a/src/validate/html/validateElement.ts b/src/validate/html/validateElement.ts
index 83de0b49aa..9f082e0fdd 100644
--- a/src/validate/html/validateElement.ts
+++ b/src/validate/html/validateElement.ts
@@ -2,6 +2,8 @@ import * as namespaces from '../../utils/namespaces';
 import validateEventHandler from './validateEventHandler';
 import validate, { Validator } from '../index';
 import { Node } from '../../interfaces';
+import { dimensions } from '../../utils/patterns';
+import isVoidElementName from '../../utils/isVoidElementName';
 
 const svg = /^(?:altGlyph|altGlyphDef|altGlyphItem|animate|animateColor|animateMotion|animateTransform|circle|clipPath|color-profile|cursor|defs|desc|discard|ellipse|feBlend|feColorMatrix|feComponentTransfer|feComposite|feConvolveMatrix|feDiffuseLighting|feDisplacementMap|feDistantLight|feDropShadow|feFlood|feFuncA|feFuncB|feFuncG|feFuncR|feGaussianBlur|feImage|feMerge|feMergeNode|feMorphology|feOffset|fePointLight|feSpecularLighting|feSpotLight|feTile|feTurbulence|filter|font|font-face|font-face-format|font-face-name|font-face-src|font-face-uri|foreignObject|g|glyph|glyphRef|hatch|hatchpath|hkern|image|line|linearGradient|marker|mask|mesh|meshgradient|meshpatch|meshrow|metadata|missing-glyph|mpath|path|pattern|polygon|polyline|radialGradient|rect|set|solidcolor|stop|switch|symbol|text|textPath|tref|tspan|unknown|use|view|vkern)$/;
 
@@ -157,6 +159,23 @@ export default function validateElement(
 						message: `'${name}' binding can only be used with <audio> or <video>`
 					});
 				}
+			} else if (dimensions.test(name)) {
+				if (node.name === 'svg' && (name === 'offsetWidth' || name === 'offsetHeight')) {
+					validator.error(attribute, {
+						code: 'invalid-binding',
+						message: `'${attribute.name}' is not a valid binding on <svg>. Use '${name.replace('offset', 'client')}' instead`
+					});
+				} else if (svg.test(node.name)) {
+					validator.error(attribute, {
+						code: 'invalid-binding',
+						message: `'${attribute.name}' is not a valid binding on SVG elements`
+					});
+				} else if (isVoidElementName(node.name)) {
+					validator.error(attribute, {
+						code: 'invalid-binding',
+						message: `'${attribute.name}' is not a valid binding on void elements like <${node.name}>. Use a wrapper element instead`
+					});
+				}
 			} else {
 				validator.error(attribute, {
 					code: `invalid-binding`,
diff --git a/test/js/samples/bind-width-height/expected-bundle.js b/test/js/samples/bind-width-height/expected-bundle.js
new file mode 100644
index 0000000000..4d003e7e85
--- /dev/null
+++ b/test/js/samples/bind-width-height/expected-bundle.js
@@ -0,0 +1,218 @@
+function noop() {}
+
+function assign(tar, src) {
+	for (var k in src) tar[k] = src[k];
+	return tar;
+}
+
+function insertNode(node, target, anchor) {
+	target.insertBefore(node, anchor);
+}
+
+function detachNode(node) {
+	node.parentNode.removeChild(node);
+}
+
+function createElement(name) {
+	return document.createElement(name);
+}
+
+function addResizeListener(element, fn) {
+	if (getComputedStyle(element).position === 'static') {
+		element.style.position = 'relative';
+	}
+
+	const object = document.createElement('object');
+	object.setAttribute('style', 'display: block; position: absolute; top: 0; left: 0; height: 100%; width: 100%; overflow: hidden; pointer-events: none; z-index: -1;');
+	object.type = 'text/html';
+
+	object.onload = () => {
+		object.contentDocument.defaultView.addEventListener('resize', fn);
+	};
+
+	if (/Trident/.test(navigator.userAgent)) {
+		element.appendChild(object);
+		object.data = 'about:blank';
+	} else {
+		object.data = 'about:blank';
+		element.appendChild(object);
+	}
+
+	return {
+		cancel: () => {
+			object.contentDocument.defaultView.removeEventListener('resize', fn);
+			element.removeChild(object);
+		}
+	};
+}
+
+function blankObject() {
+	return Object.create(null);
+}
+
+function destroy(detach) {
+	this.destroy = noop;
+	this.fire('destroy');
+	this.set = noop;
+
+	if (detach !== false) this._fragment.u();
+	this._fragment.d();
+	this._fragment = null;
+	this._state = {};
+}
+
+function _differs(a, b) {
+	return a != a ? b == b : a !== b || ((a && typeof a === 'object') || typeof a === 'function');
+}
+
+function fire(eventName, data) {
+	var handlers =
+		eventName in this._handlers && this._handlers[eventName].slice();
+	if (!handlers) return;
+
+	for (var i = 0; i < handlers.length; i += 1) {
+		var handler = handlers[i];
+
+		if (!handler.__calling) {
+			handler.__calling = true;
+			handler.call(this, data);
+			handler.__calling = false;
+		}
+	}
+}
+
+function get() {
+	return this._state;
+}
+
+function init(component, options) {
+	component._handlers = blankObject();
+	component._bind = options._bind;
+
+	component.options = options;
+	component.root = options.root || component;
+	component.store = component.root.store || options.store;
+}
+
+function on(eventName, handler) {
+	var handlers = this._handlers[eventName] || (this._handlers[eventName] = []);
+	handlers.push(handler);
+
+	return {
+		cancel: function() {
+			var index = handlers.indexOf(handler);
+			if (~index) handlers.splice(index, 1);
+		}
+	};
+}
+
+function set(newState) {
+	this._set(assign({}, newState));
+	if (this.root._lock) return;
+	this.root._lock = true;
+	callAll(this.root._beforecreate);
+	callAll(this.root._oncreate);
+	callAll(this.root._aftercreate);
+	this.root._lock = false;
+}
+
+function _set(newState) {
+	var oldState = this._state,
+		changed = {},
+		dirty = false;
+
+	for (var key in newState) {
+		if (this._differs(newState[key], oldState[key])) changed[key] = dirty = true;
+	}
+	if (!dirty) return;
+
+	this._state = assign(assign({}, oldState), newState);
+	this._recompute(changed, this._state);
+	if (this._bind) this._bind(changed, this._state);
+
+	if (this._fragment) {
+		this.fire("state", { changed: changed, current: this._state, previous: oldState });
+		this._fragment.p(changed, this._state);
+		this.fire("update", { changed: changed, current: this._state, previous: oldState });
+	}
+}
+
+function callAll(fns) {
+	while (fns && fns.length) fns.shift()();
+}
+
+function _mount(target, anchor) {
+	this._fragment[this._fragment.i ? 'i' : 'm'](target, anchor || null);
+}
+
+function _unmount() {
+	if (this._fragment) this._fragment.u();
+}
+
+var proto = {
+	destroy,
+	get,
+	fire,
+	on,
+	set,
+	_recompute: noop,
+	_set,
+	_mount,
+	_unmount,
+	_differs
+};
+
+/* generated by Svelte vX.Y.Z */
+
+function create_main_fragment(component, ctx) {
+	var div, div_resize_listener;
+
+	function div_resize_handler() {
+		component.set({ w: div.offsetWidth, h: div.offsetHeight });
+	}
+
+	return {
+		c() {
+			div = createElement("div");
+			div.textContent = "some content";
+			component.root._beforecreate.push(div_resize_handler);
+		},
+
+		m(target, anchor) {
+			insertNode(div, target, anchor);
+			div_resize_listener = addResizeListener(div, div_resize_handler);
+		},
+
+		p: noop,
+
+		u() {
+			detachNode(div);
+			div_resize_listener.cancel();
+		},
+
+		d: noop
+	};
+}
+
+function SvelteComponent(options) {
+	init(this, options);
+	this._state = assign({}, options.data);
+
+	if (!options.root) {
+		this._oncreate = [];
+		this._beforecreate = [];
+	}
+
+	this._fragment = create_main_fragment(this, this._state);
+
+	if (options.target) {
+		this._fragment.c();
+		this._mount(options.target, options.anchor);
+
+		callAll(this._beforecreate);
+	}
+}
+
+assign(SvelteComponent.prototype, proto);
+
+export default SvelteComponent;
diff --git a/test/js/samples/bind-width-height/expected.js b/test/js/samples/bind-width-height/expected.js
new file mode 100644
index 0000000000..19014886a2
--- /dev/null
+++ b/test/js/samples/bind-width-height/expected.js
@@ -0,0 +1,54 @@
+/* generated by Svelte vX.Y.Z */
+import { addResizeListener, assign, callAll, createElement, detachNode, init, insertNode, noop, proto } from "svelte/shared.js";
+
+function create_main_fragment(component, ctx) {
+	var div, div_resize_listener;
+
+	function div_resize_handler() {
+		component.set({ w: div.offsetWidth, h: div.offsetHeight });
+	}
+
+	return {
+		c() {
+			div = createElement("div");
+			div.textContent = "some content";
+			component.root._beforecreate.push(div_resize_handler);
+		},
+
+		m(target, anchor) {
+			insertNode(div, target, anchor);
+			div_resize_listener = addResizeListener(div, div_resize_handler);
+		},
+
+		p: noop,
+
+		u() {
+			detachNode(div);
+			div_resize_listener.cancel();
+		},
+
+		d: noop
+	};
+}
+
+function SvelteComponent(options) {
+	init(this, options);
+	this._state = assign({}, options.data);
+
+	if (!options.root) {
+		this._oncreate = [];
+		this._beforecreate = [];
+	}
+
+	this._fragment = create_main_fragment(this, this._state);
+
+	if (options.target) {
+		this._fragment.c();
+		this._mount(options.target, options.anchor);
+
+		callAll(this._beforecreate);
+	}
+}
+
+assign(SvelteComponent.prototype, proto);
+export default SvelteComponent;
\ No newline at end of file
diff --git a/test/js/samples/bind-width-height/input.html b/test/js/samples/bind-width-height/input.html
new file mode 100644
index 0000000000..c48fe356d0
--- /dev/null
+++ b/test/js/samples/bind-width-height/input.html
@@ -0,0 +1,3 @@
+<div bind:offsetWidth=w bind:offsetHeight=h>
+	some content
+</div>
\ No newline at end of file
diff --git a/test/validator/samples/binding-dimensions-svg-child/errors.json b/test/validator/samples/binding-dimensions-svg-child/errors.json
new file mode 100644
index 0000000000..d35946678e
--- /dev/null
+++ b/test/validator/samples/binding-dimensions-svg-child/errors.json
@@ -0,0 +1,15 @@
+[{
+	"code": "invalid-binding",
+	"message": "'offsetWidth' is not a valid binding on SVG elements",
+	"pos": 13,
+	"start": {
+		"line": 2,
+		"column": 7,
+		"character": 13
+	},
+	"end": {
+		"line": 2,
+		"column": 23,
+		"character": 29
+	}
+}]
\ No newline at end of file
diff --git a/test/validator/samples/binding-dimensions-svg-child/input.html b/test/validator/samples/binding-dimensions-svg-child/input.html
new file mode 100644
index 0000000000..8819dca703
--- /dev/null
+++ b/test/validator/samples/binding-dimensions-svg-child/input.html
@@ -0,0 +1,3 @@
+<svg>
+	<text bind:offsetWidth>some text</text>
+</svg>
\ No newline at end of file
diff --git a/test/validator/samples/binding-dimensions-svg/errors.json b/test/validator/samples/binding-dimensions-svg/errors.json
new file mode 100644
index 0000000000..930f577f22
--- /dev/null
+++ b/test/validator/samples/binding-dimensions-svg/errors.json
@@ -0,0 +1,15 @@
+[{
+	"code": "invalid-binding",
+	"message": "'offsetWidth' is not a valid binding on <svg>. Use 'clientWidth' instead",
+	"pos": 5,
+	"start": {
+		"line": 1,
+		"column": 5,
+		"character": 5
+	},
+	"end": {
+		"line": 1,
+		"column": 21,
+		"character": 21
+	}
+}]
\ No newline at end of file
diff --git a/test/validator/samples/binding-dimensions-svg/input.html b/test/validator/samples/binding-dimensions-svg/input.html
new file mode 100644
index 0000000000..ced9988f8f
--- /dev/null
+++ b/test/validator/samples/binding-dimensions-svg/input.html
@@ -0,0 +1 @@
+<svg bind:offsetWidth></svg>
\ No newline at end of file
diff --git a/test/validator/samples/binding-dimensions-void/errors.json b/test/validator/samples/binding-dimensions-void/errors.json
new file mode 100644
index 0000000000..555cb33f5d
--- /dev/null
+++ b/test/validator/samples/binding-dimensions-void/errors.json
@@ -0,0 +1,15 @@
+[{
+	"code": "invalid-binding",
+	"message": "'offsetWidth' is not a valid binding on void elements like <img>. Use a wrapper element instead",
+	"pos": 22,
+	"start": {
+		"line": 1,
+		"column": 22,
+		"character": 22
+	},
+	"end": {
+		"line": 1,
+		"column": 38,
+		"character": 38
+	}
+}]
\ No newline at end of file
diff --git a/test/validator/samples/binding-dimensions-void/input.html b/test/validator/samples/binding-dimensions-void/input.html
new file mode 100644
index 0000000000..985f6b1930
--- /dev/null
+++ b/test/validator/samples/binding-dimensions-void/input.html
@@ -0,0 +1 @@
+<img src='potato.jpg' bind:offsetWidth>
\ No newline at end of file