This is happening in my hero banners and cards where the image is set to cover the entire div. The image is positioned with top, left, right and left set to 0 and the width and height set to 100%. It is the height that is causing the problem. If I disable the height I have set, Bricks sets a height of fit-content which causes the same problem. If I turn that off, the issue goes away. Is something now broken with image heights?
The site is under development but if you look at this page Life events – Otter Vale Churches you will see the grey bar at the bottom of the banner image and also the cards at the bottom of the page.
I’ve tried regenerating css (which is external) and have class chaining turned off as I use ACSS 2.5 but this is straight Bricks stuff, no ACSS.
Setting it as you suggested works but why and why has this broken in 1.8.1? Setting absolute position on the picture wrapper should surely set the image to be positioned this way and must have in 1.7.3? I don’t want to go and have to set this on every image on the Bricks class that is absolutely positioned or have to remove figure and picture tags.
can you provide me with a staging copy of your site using 1.7.3 where it works as you would expect? Then I’m happy to check what might have changed in 1.8.
I don’t have a staging copy I’m afraid as this is a brand new site so I’m developing it live. I could roll back to 1.7.3 I guess if it would help check if it is a bug.
maybe you can copy the current state to a staging environment and revert back to 1.7.3 on this staging environment then. You can also create a copy of the site using a plugin like Duplicator and send me the files. Then I can set up a local copy and test it here.
So on the class attached to the block which is forming the card, I had padding being applied to all sides. The card is positioned relative with a height of 25rem. The image is then positioned absolutely at 0,0,0,0 with a height and width of 100% to cover the entire card. It is the padding that is causing the issue.
If you go to About – Otter Vale Churches you will see at the bottom of the page, two identical sections with cards in. In the first section, I have removed the padding from the class on the cards and the display in Safari is correct.
In the second section I have added padding of 5rem to the top of the first card and you can see the grey bar. If you inspect and turn off this padding, the card display is correct.
I then went to the Bricks trial site (Links – Try Bricks – t43a28bd) I have which is running 1.8 and tried the same thing there and the padding was dealt with OK in Safari so it seems to be a Bricks 1.8 - 1.8.1 issue.
