Using flexbox centering on an absolute block on Safari doesn't work

Question

I am centering a block of text on an image, using flexbox. It's working well in Chrome and other browsers. But not at all in Safari.

Also a note that I know I could add the image as a background-image, on the .fullscreen class. But I'm trying to not do that.

Any ideas?

.fullscreen {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

p {
  position: absolute;
  color: white;
  margin: 0;
  font-size: 24px;
  font-family: "Helvetica Neue";
}

<div class="fullscreen">
  <p>
    Some text on top of the image
  </p>
  <img src="https://unsplash.it/700/300/?random">
</div>