search

bigbite / macy.js

http://macyjs.com/
MIT License
1.3k stars 156 forks source link

Macy is not disabled when `columns: 1` is set #88

Open 1aurabrown opened 3 years ago

1aurabrown commented 3 years ago

In the documentation it says:

breakAt

Default: None This object allows you to specify how the total number of columns will change based on the width of the viewport. Setting an option to 780: 3 for example will adjust the column count to 3 when the viewport is <= 780px. If the viewport resizes after the page has loaded, Macy will rerun to ensure optimum sorting

If the column is set to one then Macy will remove all styling to leave you to style it perfectly on mobile.

Added in v2.1 breakAt now supports changing margin within these breakpoints.

My macy setup:

msnry = new Macy ({
    container: '.js-masonry-wrapper',
    columns: 1,
    waitForImages: true,
    mobileFirst: true,
    breakAt: {
      '768': {
        columns: 2,
        margin: {
          x: 160,
          y: 32
        },
      }
    }
  })

Everything looks great on desktop: https://share.getcloudapp.com/z8uONPEA

On mobile, the layout does switch to single column, but Macy continues to be active. Any changes to the viewport produce a visual lag during which Macy is recalculating the layout, as reflected in the absolute positions assigned to the each element: https://share.getcloudapp.com/bLukXgzO

This remains the case when I set mobileFirst to false and invert the way my breakpoints are set up (so that columns: 1 is nested in a breakpoint under breakAt).

In a single column layout, absolute positioning is unnecessary and makes the site look buggy. Macy should be disabled as specified in the documentation.