Odd behavior for image tags with box shadow

User avatar
ZenN
Posts: 258
Joined: 11 months ago
Pronoun: he / him
Location: Canada
Has thanked: 38 times
Been thanked: 53 times

Titles & Recognition

Post by ZenN » 2 weeks 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
Expand Signature
Commander
Derevi, ETB Tactician - 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: 996
Joined: 1 year ago
Answers: 1
Pronoun: he / him
Has thanked: 46 times
Been thanked: 212 times
Contact:

Titles & Recognition

Post by Feyd_Ruin » 2 weeks 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.
Expand Signature
  « Ex cineribus nos renatus. »  

User avatar
ZenN
Posts: 258
Joined: 11 months ago
Pronoun: he / him
Location: Canada
Has thanked: 38 times
Been thanked: 53 times

Titles & Recognition

Post by ZenN » 2 weeks ago

Feyd_Ruin wrote:
2 weeks 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. :)
Expand Signature
Commander
Derevi, ETB Tactician - 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: 258
Joined: 11 months ago
Pronoun: he / him
Location: Canada
Has thanked: 38 times
Been thanked: 53 times

Titles & Recognition

Post by ZenN » 2 weeks 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.
Expand Signature
Commander
Derevi, ETB Tactician - 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: 996
Joined: 1 year ago
Answers: 1
Pronoun: he / him
Has thanked: 46 times
Been thanked: 212 times
Contact:

Titles & Recognition

Post by Feyd_Ruin » 2 weeks 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 >_<
Expand Signature
  « Ex cineribus nos renatus. »  

Post Reply Previous topicNext topic

Return to “Community Software Feedback and Bug Reports”