pwa-asset-generator
pwa-asset-generator copied to clipboard
elegantapp
Stretched images on iOS 13 with iPAD pro landscape
Hi
I am getting stretched images for splash on IOS ipad pro in landscape mode - i have tried multiple input formats.
What should i use as input (size and file type) ?
Hi @ganySA, can you please paste the generated image and the command that you execute here?
Hi, This might be a problem related to iPadOS as all necessary files are generated. I tried various solutions from a thread here but nothing seemed to work, always got the same results as @ganySA. The first comment of this answer tipped me off. So probably out of scope for this tool 😞- @onderceylan any thoughts on this? Tested on iPad 6th gen with OS version 13.3.
Hi @fabianhinz @ganySA,
I tested the behavior on iOS 13.0 landscape orientation and it indeed stretches the portrait image on landscape and it doesn't respect the image provided in landscape orientation anymore. Resulting with the following display:
This is not the case on iOS 12 and earlier, so launch images on landscape mode on iOS 12 looks as expected:
I submitted this issue to Apple Feedback Assistant - https://feedbackassistant.apple.com providing all the details and I hope it gets attention from their side. It looks like our hands are tied until a resolution is provided by Apple.
I'll keep this bug open as a reminder to implement any future changes that might come from Apple side.
Thanks for reporting this to Apple. Took me a long time to find out about this issue. Effectively, to me it means that all iPad splash screens are best removed, because most users are on iOS13 and most people launch iPad web apps in landscape mode.
I first tried a middle ground approach, to supply specific portrait mode images only (orientation: portrait), and then to accept that landscape will have none. Not even this strategy works, it will also pick it up in landscape mode. It looks like orientation as a whole is ignored in iOS13.
Just checked the issue again, it didn't get any reaction since it's opened on Dec 30, 2019. That's just, sad.
If anybody is willing to submit this issue to Apple like I did, that would create more voice and hopefully help.
Here's a template for creating an issue on Apple feedback assistant - https://feedbackassistant.apple.com/;
Basic Information Please provide a descriptive title for your feedback: Launch images of Safari website bookmarks do not match on iPadOS with iOS 13.0
Which area are you seeing an issue with? Safari
What type of feedback are you reporting? Incorrect/Unexpected Behavior
Details What does the Safari issue you are seeing involve? Bookmarks
Please provide the URL to one or more websites where you are seeing this problem: localhost
Does this issue relate to Siri Suggestions? No
What extensions or content blockers do you have enabled? Examples: Ghostery, Ublock origin None
Were you able to capture a screen recording of the issue occurring? If so, please attach it to this feedback report. Yes
Description
Please describe the issue and what steps we can take to reproduce it: After iPadOS is introduced with iOS 13.0, the behavior to display launch images on website bookmarks has been changed.
The following code works on iPad Pro (11 inch) iOS 12.0 with landscape orientation but not on iPad Pro (11 inch) iOS 13.0 with landscape orientation.
It looks like mobile safari on iOS 13.0 doesn't respect to landscape launch image anymore and it shows the portrait launch image with a stretched display, can be seen on the attached landscape-ios-13.png screenshot. As you can see from the attached screenshots, this was not an issue on iOS 12.0.
You can test this issue by extracting website.zip file to a folder and serving the folder over a web server, then add the website URL as a bookmark to the home screen.
Attachments required for the feedback is listed above;
website.zip landscape-ios-13 portrait-ios-13 landscape-ios-12 portrait-ios-12
This is still an issue. Is there any roadmap on which version of iOS will fix this? I've tried only supplying portrait splashscreens but the stretching is still present. I've also noticed the user needs to re-install the app after switching themes in the settings for the light/dark mode splashscreen to be used.
Apple doesn't share roadmaps. I would not expect that they fix this one. Hopefully, one day they support Web Manifest, which is the proper place for launch icons.
This is still an issue as of iOS 13.4. Please submit an issue to https://feedbackassistant.apple.com/ with the template and the files attached on this PR.
I have the same issue in iOS 13.4, I submitted an issue using the same description as you made and a video that I recorded showing the behavior, also I send a firebase URL to they can check it out and test it. I hope answer fast.
Thanks for your help @onderceylan
Thanks for submitting an issue @Quethzel! The more voice we have the sooner we get a reaction and hopefully a fix on iPad OS for this problem.
This is still an issue as of iOS 13.5.
Please submit an issue to https://feedbackassistant.apple.com/ with the template and the files attached on this PR.
I tested today on iPadOS 13.6.1. Showed stretched image still. I'm thinking they may have fixed it in iPadOS 14. Maybe someone has a Beta version of iPadOS 14 they can test with?
iPadOS 13.7 showed stretched images when installed today. I submitted feedback to Apple.
still an issue on ipados 14.2
I'd suggest https://feedbackassistant.apple.com/ if not submitted already.
Also, are a new media queries and images needed for the new iPad released a few weeks ago?
Also, are a new media queries and images needed for the new iPad released a few weeks ago?
Here's what I used. Has anyone tested any of those on the new 2020 iOS devices?
<!-- Apple Launch Screen Start -->
<link rel="apple-touch-startup-image" media="screen and (device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)" href="/pages/splash-screen/images/1.png">
<link rel="apple-touch-startup-image" media="screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)" href="/pages/splash-screen/images/2.png">
<link rel="apple-touch-startup-image" media="screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)" href="/pages/splash-screen/images/3.png">
<link rel="apple-touch-startup-image" media="screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" href="/pages/splash-screen/images/4.png">
<link rel="apple-touch-startup-image" media="screen and (device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)" href="/pages/splash-screen/images/5.png">
<link rel="apple-touch-startup-image" media="screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)" href="/pages/splash-screen/images/6.png">
<link rel="apple-touch-startup-image" media="screen and (device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)" href="/pages/splash-screen/images/7.png">
<link rel="apple-touch-startup-image" media="screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)" href="/pages/splash-screen/images/8.png">
<link rel="apple-touch-startup-image" media="screen and (device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)" href="/pages/splash-screen/images/9.png">
<link rel="apple-touch-startup-image" media="screen and (device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)" href="/pages/splash-screen/images/10.png">
<link rel="apple-touch-startup-image" media="screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)" href="/pages/splash-screen/images/11.png">
<link rel="apple-touch-startup-image" media="screen and (device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)" href="/pages/splash-screen/images/12.png">
<link rel="apple-touch-startup-image" media="screen and (device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" href="/pages/splash-screen/images/13.png">
<link rel="apple-touch-startup-image" media="screen and (device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" href="/pages/splash-screen/images/14.png">
<link rel="apple-touch-startup-image" media="screen and (width: 834px) and (height: 1194px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)" href="/pages/splash-screen/images/15.png">
<link rel="apple-touch-startup-image" media="screen and (device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" href="/pages/splash-screen/images/16.png">
<link rel="apple-touch-startup-image" media="screen and (device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" href="/pages/splash-screen/images/17.png">
<link rel="apple-touch-startup-image" media="screen and (width: 834px) and (height: 1194px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" href="/pages/splash-screen/images/18.png">
<link rel="apple-touch-startup-image" media="screen and (device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)" href="/pages/splash-screen/images/19.png">
<link rel="apple-touch-startup-image" media="screen and (device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" href="/pages/splash-screen/images/20.png">
<!-- 2020 Start -->
<link rel="apple-touch-startup-image" media="screen and (device-width: 810px) and (device-height: 1080px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" href="/pages/splash-screen/images/21.png">
<link rel="apple-touch-startup-image" media="screen and (device-width: 810px) and (device-height: 1080px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)" href="/pages/splash-screen/images/22.png">
<link rel="apple-touch-startup-image" media="screen and (device-width: 820px) and (device-height: 1180px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" href="/pages/splash-screen/images/23.png">
<link rel="apple-touch-startup-image" media="screen and (device-width: 820px) and (device-height: 1180px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)" href="/pages/splash-screen/images/24.png">
<link rel="apple-touch-startup-image" media="screen and (device-width: 428px) and (device-height: 926px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)" href="/pages/splash-screen/images/25.png">
<link rel="apple-touch-startup-image" media="screen and (device-width: 428px) and (device-height: 926px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)" href="/pages/splash-screen/images/26.png">
<link rel="apple-touch-startup-image" media="screen and (device-width: 360px) and (device-height: 780px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)" href="/pages/splash-screen/images/27.png">
<link rel="apple-touch-startup-image" media="screen and (device-width: 360px) and (device-height: 780px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)" href="/pages/splash-screen/images/28.png">
<link rel="apple-touch-startup-image" media="screen and (device-width: 390px) and (device-height: 844px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)" href="/pages/splash-screen/images/29.png">
<link rel="apple-touch-startup-image" media="screen and (device-width: 390px) and (device-height: 844px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)" href="/pages/splash-screen/images/30.png">
<!-- 2020 End -->
<!-- Apple Launch Screen End -->
Also, are a new media queries and images needed for the new iPad released a few weeks ago?
Here's what I used. Has anyone tested any of those on the new 2020 iOS devices?
<!-- Apple Launch Screen Start --> <link rel="apple-touch-startup-image" media="screen and (device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)" href="/pages/splash-screen/images/1.png"> <link rel="apple-touch-startup-image" media="screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)" href="/pages/splash-screen/images/2.png"> <link rel="apple-touch-startup-image" media="screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)" href="/pages/splash-screen/images/3.png"> <link rel="apple-touch-startup-image" media="screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" href="/pages/splash-screen/images/4.png"> <link rel="apple-touch-startup-image" media="screen and (device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)" href="/pages/splash-screen/images/5.png"> <link rel="apple-touch-startup-image" media="screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)" href="/pages/splash-screen/images/6.png"> <link rel="apple-touch-startup-image" media="screen and (device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)" href="/pages/splash-screen/images/7.png"> <link rel="apple-touch-startup-image" media="screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)" href="/pages/splash-screen/images/8.png"> <link rel="apple-touch-startup-image" media="screen and (device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)" href="/pages/splash-screen/images/9.png"> <link rel="apple-touch-startup-image" media="screen and (device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)" href="/pages/splash-screen/images/10.png"> <link rel="apple-touch-startup-image" media="screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)" href="/pages/splash-screen/images/11.png"> <link rel="apple-touch-startup-image" media="screen and (device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)" href="/pages/splash-screen/images/12.png"> <link rel="apple-touch-startup-image" media="screen and (device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" href="/pages/splash-screen/images/13.png"> <link rel="apple-touch-startup-image" media="screen and (device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" href="/pages/splash-screen/images/14.png"> <link rel="apple-touch-startup-image" media="screen and (width: 834px) and (height: 1194px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)" href="/pages/splash-screen/images/15.png"> <link rel="apple-touch-startup-image" media="screen and (device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" href="/pages/splash-screen/images/16.png"> <link rel="apple-touch-startup-image" media="screen and (device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" href="/pages/splash-screen/images/17.png"> <link rel="apple-touch-startup-image" media="screen and (width: 834px) and (height: 1194px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" href="/pages/splash-screen/images/18.png"> <link rel="apple-touch-startup-image" media="screen and (device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)" href="/pages/splash-screen/images/19.png"> <link rel="apple-touch-startup-image" media="screen and (device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" href="/pages/splash-screen/images/20.png"> <!-- 2020 Start --> <link rel="apple-touch-startup-image" media="screen and (device-width: 810px) and (device-height: 1080px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" href="/pages/splash-screen/images/21.png"> <link rel="apple-touch-startup-image" media="screen and (device-width: 810px) and (device-height: 1080px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)" href="/pages/splash-screen/images/22.png"> <link rel="apple-touch-startup-image" media="screen and (device-width: 820px) and (device-height: 1180px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" href="/pages/splash-screen/images/23.png"> <link rel="apple-touch-startup-image" media="screen and (device-width: 820px) and (device-height: 1180px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)" href="/pages/splash-screen/images/24.png"> <link rel="apple-touch-startup-image" media="screen and (device-width: 428px) and (device-height: 926px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)" href="/pages/splash-screen/images/25.png"> <link rel="apple-touch-startup-image" media="screen and (device-width: 428px) and (device-height: 926px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)" href="/pages/splash-screen/images/26.png"> <link rel="apple-touch-startup-image" media="screen and (device-width: 360px) and (device-height: 780px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)" href="/pages/splash-screen/images/27.png"> <link rel="apple-touch-startup-image" media="screen and (device-width: 360px) and (device-height: 780px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)" href="/pages/splash-screen/images/28.png"> <link rel="apple-touch-startup-image" media="screen and (device-width: 390px) and (device-height: 844px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)" href="/pages/splash-screen/images/29.png"> <link rel="apple-touch-startup-image" media="screen and (device-width: 390px) and (device-height: 844px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)" href="/pages/splash-screen/images/30.png"> <!-- 2020 End --> <!-- Apple Launch Screen End -->
Hi @MarkB700, thanks for sharing the 2020 Apple devices block. The website that library uses to feed the data is not updated yet. Considering Apple's delay on updating it's own site, I now think it would be better to maintain this specs manually and ditch the scraping part.
Bug still not fixed on iOS 14.3. Shame on Apple! I have reported many things in the past via Feedback Assistant (usually Xcode related) but except of wanting more and more info from me, they never solved reported bug and they never replied. They totally ignore bugs reported by community.
+1 reported via Feedback Assistant. I have no hope. I have there open another feedbacks from 2019 and 2020 and Apple does not reply.
Tested now, still not fixed in iOS 14.4. My report via feedback assistant (Jan 19, 2021 at 8:23 PM – FB8975579) is still in "OPEN" state without Apple's answer.
Apple ignores reports via feedbackassistant (still no reply at all to report from Jan 2021). Apple is not developer friendly. It is nightmare to force apple to solve bugs.
Apple ignores reports via feedbackassistant (still no reply at all to report from Jan 2021). Apple is not developer friendly. It is nightmare to force apple to solve bugs.
I've reached out to Maximiliano to see if he can assist:
Apple ignores reports via feedbackassistant (still no reply at all to report from Jan 2021). Apple is not developer friendly. It is nightmare to force apple to solve bugs.
If anyone has a LinkedIn account, they could search for "Apple Safari Team" and politely message the Apple engineering team lead(s) there, giving them a link to this page (https://github.com/onderceylan/pwa-asset-generator/issues/93) and asking if they could look at it.