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.
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.
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).
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.
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.
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.