I cannot reproduce on my Win10 with 3 monitors, one of them is set to 200%. Probably we need win7 set to 150% but I don't have win7 around. Can anyone confirm?

Tested on both stable and canary on both Windows 7 and 10, I don't get a repro. If the window is small enough it goes into mobile-mode, which can look a little awkward if the window isn't THAT small, but that's not the issue as described.

Adding Blink>Layout if someone watching that list has any idea, since I've never heard of masonry causing problems before, otherwise we might need more information.

Layout bug triager says: I have no clue. OP will need to give more detailed reproduction steps. Or is there some internals page with valuable info that OP can give us when this happens?

It looks to me that it's switching layout between 2 and 4 cols when window width changes.

Are you using media query based on the width?

Hi everyone, thanks for looking into this. Changing from 4 columns to 2 when decreasing the browser window size is implemented for tablet and mobile viewing. So yes this is a normal action and it is not related to my issue. 

To give you a little more information, the issue happens on my machine at zoom 90% only while windows 7 icon and text setting is set to 150%. When i change icon and text setting to 125% then the issue only shows up on zoom level 67%. 

Thanks    

This is working as intended and per design. Zooming in effectively reduces the size of the window thus triggering the media rule that changes to two columns.

Hi, 

Im sorry but this is not working as intended and is not anything due to design. The design is intended to switch the layout from 4 columns to 2 columns only when viewport gets smaller for tablets and mobile devices. 2 Columns should never show up when viewport dimensions are wider then 900px with a zoom level of 90%. And even if it was intended to be that per design which it isn't, the 2 columns would be centered and take up the full screen and not shifted to the left with a huge gap on the right. SEE SCREENSHOT ABOVE

Please take a look at the image screen shoot i posted which is pretty self explanatory. Chrome is calculating something incorrectly where all other browsers do not have this problem. And just to add, my website is not the only site with this problem. I have tested other sites with the same type of setup and the same issue effects those other sites as well. this is surly not an intended function. 

For an example, zooming to 150% on a desktop causes 4 columns to change to 2 columns but those 2 columns take up the whole page and are centered. ( this is the correct function per design)

Screenshot i posted above is at 90% zoom on a desktop where 4 columns should be shown but instead show 2 columns not centered with a huge gap on the right. ( NOT INTENDED FUNCTION PER DESIGN)

Thanks 

I couldn't reproduce this on linux desktop, which should have the same behavior,  with various settings.

It's could be very specific to some windows version indeed. bsep@, can you test and see if this happens in your environment?

After testing again I reproduced the issue. It's very finicky. Here are repro steps that work on Windows and Linux (did not test other platforms):
1. Open http://www.cancermind.com/#Cancer%20Blog
2. Zoom the page to 67% (at 100% dsf or 125% dsf) or 90% (at 150% dsf)
3. Refresh the page

Some observations:
* Once the bug is triggered it's basically impossible to un-trigger without refreshing the page again. You can resize the window or change the zoom level however you want and it'll stay in two columns.
* If you set the magic zoom values but don't refresh the page sometimes the page will pop into two columns without doing anything else. I think something is loading in the background that triggers a re-layout.
* I can't see any reason that the layout should change. The relevant <li>s are at 24.98% width and their computed size doesn't change before and after. (~494px with a 1800px viewport).

It's certainly odd which makes me suspect it's a real bug in Blink. But the site's CSS is hard for me to get a handle on so I can't be sure. Anyway, since it reproduces at 100% dsf this probably isn't hidpi related.

Since this can be reproduced, any idea if this can be fixed? and if so when? Thanks again for everyone's input and help. 

cancerminds, a minimal reproduction would be helpful. As comment 9 says, the site's CSS is hard to get a handle on. Could you whittle it down to just what's necessary to trigger the bug and then put it in a jsfiddle/codepen/etc?

This issue has been Available for over a year. If it's no longer important or seems unlikely to be fixed, please consider closing it out. If it is important, please re-triage the issue.

Sorry for the inconvenience if the bug really should have been left as Available. If you change it back, also remove the "Hotlist-Recharge-Cold" label.

For more details visit https://www.chromium.org/issue-tracking/autotriage - Your friendly Sheriffbot

cancerminds -- looks like you changed your site and no longer use masonry? Did you ever get around to making a small reproduction of this issue?

Issue was never fixed or resolved. I just couldn't waste anymore time on this issue so i changed the layout of my site to avoid masonry. 

After doing a test today, issue is still showing. This is a widespread issue that affects many sites not just my own. I don't know why the css on my site was hard to understand or why it got in the way of some you locating the bug. 

However, if someone would want to continue investigating this issue and try to fix it many sites that use masonry will have this issue. For example: This site https://avada.theme-fusion.com/blog-grid-full-width/

or http://juulekay.com/

or https://www.vanityteen.com/

all have the same issue. And these are just the first ones i could gather in a few minutes. So you can look at their code and see if you can locate the bug and properly diagnose the issue. 

Thanks for all the responses. 

Good luck.