HTTP/2 server pushed asset downloading twice

I am trying to use HTTP/2 server push, powered by Cloudflare. I am trying to push two assets using the following HTTP Header...

Link: </img/whysoslow-hero.jpg>; rel=preload; as=image, </lib/bootstrap.min.css>; rel=preload; as=style

The image is reference as a background image in a stylesheet and this is being pushed and then used correctly (downloaded once).

However, I am referencing the stylesheet in the HTML of my page like this...

<link rel="stylesheet" href="/lib/bootstrap.min.css">

...and it's being pushed but then also being fetched as well (downloaded twice).

My website is... https://whysoslow.co.uk

Here's a screenshot of the Network tab in Chrome showing that the assets are pushed, but then the stylesheet is downloaded again...

Can anyone explain to me why this is happening and how I can resolve it?

EDIT:

I've since noticed that the console is saying...

A preload for 'https://whysoslow.co.uk/lib/bootstrap.min.css' is found, but is not used due to an integrity mismatch.

So it's the SRI check that's failing. But I don't understand why, it's fetching the same file, so it should be identical. Why would they not be identical?

Now that I've figured that out, I've also managed to find the answer...

How to preload script using integrity and crossorigin

Short answer: You can't preload and use SRI, it's not supported yet.