Odd behavior for image tags with box shadow

User avatar
ZenN
Posts: 455
Joined: 4 years ago
Pronoun: he / him
Location: Canada

Post by ZenN » 3 years ago

I'm seeing odd behavior with random padding showing up between the image and the box shadow for image tags with box shadow. This seems to happen consistently in Chrome, and intermittently in Firefox. It seems that the "object-fit: contain" CSS property on ".postbody img" is the culprit.

As example, one of my signature images uses BBCode that looks like this:
[image width=144px height=105px corners=8 shadow=2 title="Derevi, ETB Tactician - Value Town"]https://i.imgur.com/9UZc1l7.png[/image]

Look specifically at the right-side edge of the image.

Chrome, with "object-fit: contain":
image.png

Chrome, without "object-fit: contain":
image.png
Commander
Golos, ETB Pilgrim - Value Town
Maelstrom Wanderer a.k.a. The Kool-Aid Man
Korvold, Fae-Cursed King - OM NOM NOM
Kykar, Wind's Fury - Spellslinger + Tokens

User avatar
Feyd_Ruin
Elder Vampire
Posts: 5400
Joined: 4 years ago
Answers: 3
Pronoun: he / him
Contact:

Post by Feyd_Ruin » 3 years ago

So, in order to ensure that an image always scales to fit the post (no horizontal scrolling on small screens) without getting warped, you sometimes need the object-fit property. I added this because we were having some issues with size warping. (ie: a specific height was given, but no width, and then the max-width makes it stretch thin but still be the same height)

Unfortunately, there's a bug (if it is actually "as intended" then I claim shenanigans) in chrome where some rendering affects apply to the imaginary image container, rather then the rendered image itself, which can cause things to not align exactly. This happens when, specifically, you supply a height and width that does not match the aspect ratio of the original image. The shadow applies to the image's imaginary container, while the image itself renders in the correct ratio within that container.

In this specific case, for example, if you supply a height of 106 pixels instead of 105, the rounding is closer to the ratio and the white space disappears (or is at least technically so small as to not be noticeable).

However, the absolute best way to always make this maintain ratio and look beautiful is to supply either a height or a width, but not both. The other will default to "auto" which will tell it to scale the image at the exact ratio so that it fits the height or width that you did supply.

I edited your signature to remove the height on your elements, and you'll see they should look perfect now.

On the list (in the not-distant future), I have on the agenda to go through and redo a lot of the css, etc, as I want to streamline and cleanup a lot more things. I'll make a specific note to revisit the object-fit to see if there's a better way to ensure aspect ratios are honored at all times unless there is a specific height and width applied.
To the beaten, the broken, or the damned; the lost, and the wayward: wherever I may be, you will have a home.

User avatar
ZenN
Posts: 455
Joined: 4 years ago
Pronoun: he / him
Location: Canada

Post by ZenN » 3 years ago

Feyd_Ruin wrote:
3 years ago
In this specific case, for example, if you supply a height of 106 pixels instead of 105, the rounding is closer to the ratio and the white space disappears (or is at least technically so small as to not be noticeable).

However, the absolute best way to always make this maintain ratio and look beautiful is to supply either a height or a width, but not both. The other will default to "auto" which will tell it to scale the image at the exact ratio so that it fits the height or width that you did supply.
Ah, I hadn't caught that, or that my math had been off on my ratio. That's what I get for doing it in my head. Thanks. :)
Commander
Golos, ETB Pilgrim - Value Town
Maelstrom Wanderer a.k.a. The Kool-Aid Man
Korvold, Fae-Cursed King - OM NOM NOM
Kykar, Wind's Fury - Spellslinger + Tokens

User avatar
ZenN
Posts: 455
Joined: 4 years ago
Pronoun: he / him
Location: Canada

Post by ZenN » 3 years ago

@Feyd_Ruin

It seems that the intermittent issue I'm seeing in Firefox may actually be something else, as I'm still seeing it (though Chrome does look better, now).
image.png

Amusingly, I even saw it occur on one the article link images at the bottom of the page.
image.png
That's particularly odd is that this not only happens intermittently, but is not even consistent on the page. Right now looking at a thread and one of my posts has the messed up signature images, but on another they're fine.
Commander
Golos, ETB Pilgrim - Value Town
Maelstrom Wanderer a.k.a. The Kool-Aid Man
Korvold, Fae-Cursed King - OM NOM NOM
Kykar, Wind's Fury - Spellslinger + Tokens

User avatar
Feyd_Ruin
Elder Vampire
Posts: 5400
Joined: 4 years ago
Answers: 3
Pronoun: he / him
Contact:

Post by Feyd_Ruin » 3 years ago

Now that's just even more weird.
The core set box pictured.. that image is the element's background with size:cover, so there's no reason to ever have that. Which means something's adding padding between the block and it's wrapping div that has the shadow.
I feel like this might become a rabbit hole >_<
To the beaten, the broken, or the damned; the lost, and the wayward: wherever I may be, you will have a home.

Post Reply Previous topicNext topic

Return to “Community Software Feedback and Bug Reports”