I am using an IMG element, defined as FIGURE.
There is a border defined (circle white background) and a padding.
With object-fit: cover, the SVG (IMG) inside the FIGURE was reduced to its wanted size.
Since last Update to 1.9.7, it does not work any longer.
I found out (together with ACSS support), that there is now a new “border: inherit.”
See screenshot below.
The SVG comes from a CPT custom field, not from media manager directly.
I have no option to change the size of the svg in the editor.
Can you tell me, how can I remove this border:inherit?
Because the SVG should just fit into the FIGURE with border-radius and padding.
I dont want, that the IMG inherits the styles from the FIGURE.
the different image does not matter, because the issue appeared on element and classes level, not on content level.
I do not publish the URL here, because it is staging stuff.
In the meantime I removed the circle to a rounded square, that it shows correctly.
I dont have the time to wait several days with an display error.
The root issue is (like shown in my second image with the red square:
if you define a IMG element and define it as FIGURE.
Then you insert a square as an SVG-image.
You define the element with “object-fit: cover”.
Add some padding to the element.
Then you put a background and 50% border-radius to the element, so that the background is a circle.
Now you will see, that the squared image-svg is bigger than the circled background.
and this issue appeared only after last update to 1.9.7.
I could replicate the issue. We’ll provide a fix in the next update. Until then, I hope setting the border-radius for this image via custom CSS is possible.
Checked today with v1.9.8:
I think the fixing does not work, now the background is without border.
And I saw there are other issues with “rounded images”.
The border only applies to the image itself but not to the background.
For comparison reason:
This is how an identical section in v1.9.7.1 looks like.
Borders of backround are rounded.
Both new versions (1.9.8 and 1.9.7) are not the same as 1.9.6.
Bug not fixed imho.
I just updated to 1.9.8 and have run into similar issues now on several sites. The image has a border radius set and a box shadow. I used the Bricks UI to set these settings.
Most of my images HTML tag is set as a figure. After updating Bricks from 1.9.7.1 to 1.9.8 all the box shadows do not have a border radius anymore
I see that the style is to specific as it only targets the image within the class so the figure which has the box shadow doesn’t get the border radius.
To fix it in the meantime I now have to add custom CSS for the border radius of the figure to make it less specific just so the block shadow works like before I updated to 1.9.8):
