Cross-browser layout issue

Can anyone explain why the following website displays differently on latest Chrome vs Firefox (and how to avoid it)?
The issue is with the image overflowing it’s container on Chrome but not on Firefox.

Try to resize the output in the following JSBin on both browsers to see the symptom.

Thanks for your help in advance.

Hi @haykerman, and welcome to the community!

There is a difference in between how the two browsers are interpreting the max-block-size property on that container image. Firefox seems to be respecting it, but Chrome is not.

But, the thing is is that max-block-size is based off of the current writing-mode property. It doesn’t make sense to use a property that is tied in with text for an image. I would suggest refactoring how that image is displayed with different properties such that it isn’t using something that is depending on text modes for it to render correctly.

1 Like

Thanks for your answer, @marcusparsons! Could you, please, elaborate more on the following:

It doesn’t make sense to use a property that is tied in with text for an image

And what do you think about this paragraph from the MDN web docs.

Overall, I think of properties that have block/inline in their name as a more responsive/accessible replacement for height/width and in some cases padding/margin. Am I wrong in that assumption?

Also, changing logical properties to regular ones (e.g. max-block-size to max-height) doesn’t seem to fix the issue.

For the most part, you’re right. But specifically, that max-block-size property is tied in to the writing mode on the page.

I don’t use CSS grid myself, so my assumption is that it also has to do with you declaring the container as grid. But, I put the padding into the container, where it should be, and I swapped it to use a Flexbox display and changed those max-block-size and max-inline-size and it now scales up and down properly on both Chrome and Firefox.

I made a CodePen for what I came up with. I only changed the bottom two selectors.

I apologize, perhaps I should’ve been more explicit with my question. I sure CAN make it work using flexbox and various methods (that said, thanks for writing a working clone). But I wan’t to solve this exact particular case (with grid and logical properties). I’ll update the question.

Nothing (to my knowledge) seems to point out the way I’ve written my CSS would turn
out being laid out incorrectly in Chrome, while it works perfectly in Firefox. And also I don’t see why being tied to writing mode for images is problematic? I want the writing-mode selection to be reflected on all elements (both block and inline).

Can I Use says that both browsers support those logical properties. I’ve gone as far as copying both browsers user-agent stylesheets and inspecting differences (though I haven’t found anything that would result in this mismatch yet, but I’m still looking).

1 Like

I’m guessing it is a bug or inconsistency with replacement elements (or just images) as grid items. It doesn’t seem related to the logical properties as it doesn’t even work with just height/width.

Setting grid-template-rows: 100% on the grid container seems to fix it (I think).

There is nothing wrong with using the logical properties for this, it should compute to the same as max/min width/height.

1 Like

What I’ve found so far is Chrome sets “overflow-x” to “clip” on that image element. If I change “overflow-x” to “auto” (or even “hidden”) the img starts to scale with container and doesn’t overflow, as originally expected.

Yes, did not think the logical properties were affecting the result in any way.

I’ve reported this behavior as a Chrome bug. Waiting to see what happens next.

Adding the min sizes also seems to fix it.

section.container img {
  display: block;
  object-fit: contain;
  padding: 4rem;
  max-block-size: 100%;
  max-inline-size: 100%;
  min-block-size: 100%;
  min-inline-size: 100%;

I found this issue but I haven’t read it. There might be some information or it might be completely unrelated.

It often comes down to how the vendors interpret the specs or if the specs are vague they implement their own interpretation of it. For all we know it is Firefox that is not spec-compliant, although its behavior is more like what you would expect.

1 Like

Yeah, there are of course multiple potential fixes e.g. setting min h and w, setting overflow: hidden;, using flex instead of grid. It’s just strange that grid’s output is not like one would expect it to be.

By the way, I’ve reported a Chrome bug. You can find it by the following id: 1503924. Someone said they were able to reproduce it.

1 Like