Browser zoom breaks layout

[jamiemcconnell]

If you CMD+"+" or CMD+"+" (zoom in/zoom out) a few times Packery reacts and reapportions itself to the new browser window size - however if this is performed quickly Packery fails to correctly reposition the items.

The attached screen shot is what happens when you perform a zoom in/zoom out (3 times in and 3 times back out) in quick succession - demoed on the Packery Methods page (destroy).

Codeine where zoom-in zoom-out can be performed: http://codepen.io/desandro/pen/kEjed

[desandro]

Thanks for reporting this issue. What browser did you experience this in? I wasn't able to reproduce it in Chrome 43 or Firefox 38.

[jamiemcconnell]

Sorry - Safari Version 8.0.6 (10600.6.3) on OS X Yosemite 10.10.3

[desandro]

Yup, looks to be a problem in Safari

[desandro]

From #375 👍

---

When you zoom out in Safari and refresh the page, item width is computed incorrectly. This is because of the incorrect value of height. Outer height should be the same as element.offsetWidth (example below). Other browsers interpret given values correctly and the bug don't appear.

size.outerWidth = elem.offsetWidth; size.outerHeight = elem.offsetHeight;

and height should be computed with subtracting margin:

size.width = size.outerWidth - marginWidth; size.height = size.outerHeight - marginHeight;

Located at function getSize

Preview: