News Hub Layout not displaying correctly in Firefox

[John Warner]

This was brought to my attention by a user with Firefox.  Looks like a stylesheet issue with the flex box for nonfeatured hub news.  Other layout choices, "Top Story", "List", "Side-by-side" look fine.

Chrome

Firefox

[#2]

Hi @John Warner I've installed FireFox this evening to see if I can recreate the issue. I've installed version 62.0 (64-bit) and it all renders as expected. Are you using the most up to date browser version?

[#3]

Yes, I'm on the same version as you. It is happening on multiple machines here at the office, but only with Firefox. Also this is a Hub site, and the template is the Hub News layout for the web part. The other layouts look fine.

[#4]

@Matt Westonwere you using the Hub News layout?  This issue is still occurring for my users of Firefox.

[#5]

Hi @John Warner, yes, I'm using the hub site layout on a communications site using FireFox, although I have just had an update come down which has updated me to 60.0.2.

I'm assuming that cache's have been clear etc?

[#6]

Yes, cache is cleared. I got the patch for Firefox, but no change to the news part. The only difference I know of is that I am not using a communications site, but a team site.

[#7]

Hi John, I've created the same scenario in my tenancy now, where I have a team site as a Hub, and have got a number of news items rolling up. The news web part is set to use the hub news layout. When I accessed the site using FireFox, all still looks to be good (see Team-Hub-1.png).

I then tried to break it by using zoom in the browser. Once I get to 130% zoom, I start to see the overlap that you have described. (see Team-Hub-2.png)

Is your browser set to 100% zoom? I'm going to start playing with resolution as well now to see if I have similar issues starting to appear.

[#8]

Yes, I am at 100%. However, you got me thinking. The news part is in a Section layout that is in "One-third right" mode. I have tested moving the news part to a section that is just one column and everything un-jumbles. So It looks like firefox doesn't like having to figure out the layout positioning of a section containing multiple columns.

[#9]

You're right, I've switched to that layout and have the same issue. Looks like a limitation at the moment which only affects FireFox. Chrome is more than happy to roll with it no matter what I do with the zoom, layout etc. Not ideal, but for now your obvious workaround is to use the 100% width, however I would suggest raising a call with Microsoft Support to get this fixed.

[#10]

I've submitted a ticket. Thanks for your help.