Browser: Safari 16.6
OS: macOS
URL: Working local
Video: https://youtu.be/HGzIfHWYQ0Y
[Please describe this bug in as much detail as possible so we can replicate & debug this bug]
I’m making product cards for my shop. I want to do an image swap on hover. I have a div set to position: relative as the wrapper. Then an image inside with a picture tag set to position: static (doesn’t seem to matter what tag I put on this image). Then I have a second image set to position: absolute with all sides at 0. If I remove the tag from the selection box it works as normal. If I set it to picture or div it breaks out of the parent container and appears below the other image.
Looking in the inspector it’s telling me that the following styles are controlling the height:
:where(.brxe-image).tag {
display: inline-block;
height: fit-content; ← When I disable this it works correctly
position: relative;
width: auto;
}
It seems to be the height: fit-content that’s the problem. Which seems to be related to the actual image switching back to an img tag that gets this applied to it:
:where(.brxe-image) img {
height: 100%; ← When I disable this it works correctly
position: static !important;
transition: inherit;
width:100%
}
The actual image in the html has the attributes width=“480” height=“708” but the inspector says it’s being displayed at 267x1179. The picture/div tag wrapper set to absolute says it’s being displayed at the same dimensions. The parent div set to relative says its being displayed at 273x399.
frontend-light.css has this style for images:
img {
height: auto;
max-width: 100%;
outline: none;
vertical-align:middle
}
Which is being overridden by this other default style being applied to the post:
:where(.brxe-image) img {
height: 100%;
position: static!important;
transition: inherit;
width: 100%;
}
Why are inline height and width html attributes being overwritten by :where styles? I’m also using CSS grid and the image is breaking out of the wrapper for the full grid item as well.
The appears to only happen in Safari, not Chrome.
