Stopped working?

[BorisAnthony]

Sadly this brilliant brilliant solution seems to have stopped working. Even your demo longer works. Either Apple made it so the file must be served and can't be injected via a data: url, or they are strictly looking for an http media-type header.

[avadhesh18]

Can you please share these details?

1. iOS version
2. device name
3. If possible verify using safari web inspector if the link tags are being added to the html? and if they are, what is the size of the two generated images. Also share the device screen size. (measure using screen.width and height).

It should most probably be something easy to fix.

[BorisAnthony]

iOS 18 iPhone 15 Pro

// console.log(screen);
Screen
    availHeight: 852
    availLeft: 0
    availTop: 0
    availWidth: 393
    colorDepth: 24
    height: 852
    pixelDepth: 24
    width: 393

( reference: https://www.ios-resolution.com/ )

I have spent literally 6 hours trying to debug this with web inspector and cache clearing / busting and trying all kinds of crazy stuff. 😅

The link tags are being generated, the data URLs work when I copy and paste them into the browser location bar. PNG gets downloaded and is the right size.

The image that is generated is 3x (pixelRatio) the screen measures.

I added the media directives e.g.: <link rel=​"apple-touch-startup-image" media=​"screen and (device-width:​ 393px)​ and (device-height:​ 852px)​ and (-webkit-device-pixel-ratio:​ 3)​ and (orientation:​ portrait)​" href=​"data:​image/​png;​base64,...">​

Here is the code change I made to your (brilliant!) script:

const appleTouchStartupImageLink = document.createElement('link');
appleTouchStartupImageLink.setAttribute('rel', 'apple-touch-startup-image');
// appleTouchStartupImageLink.setAttribute('media', "screen and (orientation: portrait)");
appleTouchStartupImageLink.setAttribute('media', "screen and (device-width: "+window.innerWidth+"px) and (device-height: 852px) and (-webkit-device-pixel-ratio: "+pixelRatio+") and (orientation: portrait)");
appleTouchStartupImageLink.setAttribute('href', imageDataURL);
document.head.appendChild(appleTouchStartupImageLink);

When I hard code an actual png, it works. (And oddly it works without a media= attribute!) So at this point I am thinking they did something that blocks the data: url. I tried to use blob + URL.createObjectURL but that didn't work either.

[avadhesh18]

Filed a bug report https://bugs.webkit.org/show_bug.cgi?id=280262

It's strange that they disabled data URLs I couldn't find any mention of this in the WebKit changelog. I was planning to use the prefers-color-scheme media query to offer both dark and light splash screens, but unfortunately, that idea is now out the window.