Safari issue with positioning text using flex: works fine in chrome

Site URL: https://martine-emdur.squarespace.com/vanessa-stockard-artworks/after-christus

Have had tremendous help from @bangank36 with providing css to vertically align text to the bottom of an inline image on blogs to display exhibition artwork however have one problem with it. On Mac Chrome  looks perfect with position: absolute; bottom: 1%; but as you can see Safari gives it an extra push down below the edge of the image. 

Is anyone able to help with how I account for the different padding in Safari? 
https://martine-emdur.squarespace.com/vanessa-stockard-artworks/after-christus
password = elliot
Many thanks in advance.

In order to use position: absolute, one of the parent elements needs to be position: relative

You will also need to change bottom: 1% to bottom 0

You can use any parent element you like, that contains both the image and the text, but padding will have to be account for if you use something way up the chain.

This seems to work, but I am not sure if it will effect anything else on your page, its just one that I grabbed to give you an example:

[data-layout-label="Post Body"] {
    position: relative;
}

Edit, I also just noticed that you also have an issue between 601 and 640px wide, where the image disappears completely.

@rwp thanks so much for checking this out. I'm still learning about position properties and how they work!

I've had some help from someone on another forum who also suggested I needed the relative property in there as well! 

I did notice the disappearing image when I was shrinking the page and am not quite sure why the mobile breakpoint was so low. I changed it to 768 and it has stopped doing the disappearing act!

Thanks to @bangank36 for starting me off and to Chris Schwartz-Edmisten who did some refining for me I now have the exact effect I need for my client's site. It's a shame Squarespace can't have the lightbox option for all image formats - if they did I wouldn't have had to go through all that angst to achieve the result we needed. Here's a screenshot of safari doing the right thing and the code that achieved it in case it helps anyone. Happy days!!!

.BlogItem.hentry .sqs-block-content p {
  font-family: Arial,Helvetica,sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 12px;
  line-height: 1.2em;
}
@media only screen and (min-width: 768px) {
  .BlogItem.hentry .sqs-col-12 > [data-block-type='2'] + .row {
    display: flex;
  }

.sqs-col-12 .sqs-col-6 {
width: 50%;
position: relative;
}
  
 .BlogItem.hentry .sqs-col-6>[data-block-type='2'] {
    position: absolute;
   bottom: 0%;
  }}


@media only screen and (max-width: 767px) {
  .BlogItem.hentry .col {
    width: 100% !important;
  }
 
  .BlogItem.hentry .sqs-col-12 > [data-block-type='2'] + .row {
    display: grid;
 }
}