Design Prototyping in the Browser Design Patterns Creating a Flexible Image Gallery

Ben Moore
Ben Moore
22,588 Points

Browser Compatibility

It doesn't appear the rendering of '.gallery a' works in Firefox. I switched over to Chrome to test and it works fine.

.gallery a {
  width: 48%;
  margin: 1%;
  height: 10rem;
  background: #99F;
  display: block;
}

4 Answers

Gari Merrifield
Gari Merrifield
9,555 Points

The problem seems to be with Firefox and using a % for the top and bottom margins. After a bit of testing, I believe one possible work around is to set the vertical margins to "1vw", for 1% of the viewport width. While this isn't ideal, you can adjust the "vw" value slightly to accommodate the differences. Try using : margin: 1vw 1%; and see if your results are acceptable, or not.

EDIT: well, after more digging, I found the answer to why this happens. I can't explain it as well as Daniel Holbert has on comment 13 of this thread : https://bugzilla.mozilla.org/show_bug.cgi?id=1163119 It's part of the standard, and apparently Firefox is the only one that actually follows the specification. Rachel Andrew has a great post on the issue, and it applies to Grid as well as Flexbox : https://rachelandrew.co.uk/archives/2017/12/20/how-should-we-resolve-percentage-margins-and-padding-on-grid-and-flex-items/

EDIT#2: It sounds like they have come up with an answer, from a link in the previous link, https://www.bram.us/2017/07/30/vertical-marginspaddings-and-flexbox-a-quirky-combination/ Firefox 60 supposed to be making changes to match the rest, if I am reading this correctly, so this may be only a temporary issue for those with Firefox.

I think this is the best result you can currently get. I first thought I could calculate the margin with the calc() method.

BUT the result of the calc() method is always a percentage value when the one of the operands a percentage value is.

I discovered a related issue that has to do with the top and bottom margins of the gallery and anchor elements, which doesn't show up in Firefox. In Safari (same html and css) it is rendering with all margins as aspected.

Steven Parker
Steven Parker
203,231 Points

The selector construction and properties shown here are all very basic, any browser should handle them. I would strongly suspect any compatibility issues would be somewhere in the other code (HTML or other CSS, if any).

Kat Stacy
Kat Stacy
39,242 Points

I experienced the same problem. I do not think there is an error in the code since at the beginning of the lesson Nick had us open a new workspaces.