Translation of page media element in typo3 9 systems only renders default image

Question

Some Basic Information

Typo3 9.5.22

PHP 7.2

The system started as 8.7.x and has been updated a while back. The request to be able to change the image per language came fairly recently when typo3 was already 9.5.x.

Description

We are using the page media file (Backend: Resources - Files - Media) to display different header images per page.

Normally, to translate a media file, you just go to your backend, tick "Translation behaviour - custom value", choose an image and be done with it. This works fine with e.g. the default Text-Media-Element. If I do the same with the page media image it still only returns the default language image, not the translated one.

This is not a caching issue, since caching is deactivated on all our development systems, but I tried deleting the cache anyways, just to be sure.

I googled a little and found information (https://www.webrocker.de/2019/06/19/typo3-8-7-translation-handling-of-page-media/) that this was a common issue with typo3 8.7.x system, that had since been resolved.

The Code

header image partial

<f:spaceless>
    <f:if condition="{mediaFile} && {mediaFile.Properties.pid} == {data.uid}">
        <div class="row header-img-row">
            <div class="col-md-12 no-padding header-img-wrapper">
                <picture>
                    <source media="(max-width: 375px)"
                            srcset="{f:uri.image(image: mediaFile, width: '375', cropVariant: 'heromobile')} 1x, {f:uri.image(image: mediaFile, width: '750', cropVariant: 'heromobile')} 2x, {f:uri.image(image: mediaFile, width: '1125', cropVariant: 'heromobile')} 3x">
                    <source media="(max-width: 767px)"
                            srcset="{f:uri.image(image: mediaFile, width: '767', cropVariant: 'heromobile')} 1x, {f:uri.image(image: mediaFile, width: '1534', cropVariant: 'heromobile')} 2x">
                    <source media="(min-width: 768px)"
                            srcset="{f:uri.image(image: mediaFile, width: '1586', cropVariant: 'herodesktop')}">
                    <b:removeWidthAndHeightFromImageTag>
                        <f:image image="{mediaFile}" class="img-responsive" cropVariant="herodesktop"
                                 width="1586"/>
                    </b:removeWidthAndHeightFromImageTag>
                </picture>
            </div>
        </div>
    </f:if>
</f:spaceless>

Assumption: This self build stuff somehow works around the translation mechanic. So I replaced the whole block with: <f:media file="{mediaFile}" />, which resulted in a giant, unformatted image being displayed, but still the same behaviour on translation. Same with <f:image>. I also checked for overrides of media/image handling and there were none (as in layouts/templates/partials)

Anyone an idea what I might check additionally or how to solve this?