Our web app has a background image attached to its body, with background-size: cover. This works fine on iPad, but when adding the app to home screen, the background is removed.
Removing "apple-mobile-web-app-capable" helps, but we need this feature.
I can't seem to solve this, and would really love some inputs.
App: https://mementor.easydays.me
Thank you!
When I add the site to the home screen as a web app, and then click on the icon, the screen is white for a few seconds until the page loads, and then the background appears to load correctly.
The white background is used in place of a web app startup image, which you can specify like this:
<link rel="apple-touch-startup-image" href="/startup.png">
I recommend looking into Apple's Startup Images (more info on that here).
Does this solve your background image problem?
Related
I'm a novice at HTML and CSS and I launched a simple responsive website with only one page, but then I managed to add a couple of pages more to it after a few days. Everything looks good on desktop and when I make it smaller to 350px width via developer tools, it actually looks good as it should and all responsive.
Link: https://transporte.capital/
However, when I enter it from my mobile phone it looks horrible as CSS becomes almost inexistent. The logo becomes a link with underlines, the tweet widget is still there (I disabled it via display: none; in media queries because it takes too long to load), the social media section is distorted, all images are huge, and so on.
Is there something wrong with my mobile phone? I tried to look for cache in Site Settings - Data Stored in Chrome, but there was nothing for my website there.
Now I tried the Opera browser and the website looks good as it should. What should I do to make it update on Chrome? And will it update as it should the next time I make changes to it? Thank you!
screenshot 1
screenshot 2
I could see the page properly in my Android mobile Chrome browser. Please clear cookies once and ensure the zoom in is not enabled. Attached is my screenshot. Screen size: 393x719px
I've an issue with blurry video thumbnails with a shopify theme (Flex from Out of the Sandbox). The image in the middle is a blurry video thumbnail, whereas the top and bottom one are regular sharp product images. Link to sample product.
I tested the content within different environments:
The video itself is sharp, which is visible when it's being streamed
-> video is not the issue
The video thumbnail is sharp on another theme (Debut from Shopify)
-> Shopify CDN is not the issue, must be the theme I am using
I also uploaded a cover jpeg within Shopify admin which didn't change anything.
I couldn't identify the problem by inspecting with the browser dev tools. Can somebody give me a hint how to fix this?
In your liquid code the image URL filter is set to '300x300' (see below image)
You may just remove this or set it to 1024x1024 for better image.
Hope this info will help you.
Best of luck
I meet a problem on mgwt development and wanna ask for help here. I am developing an application using MGWT and phonegap. And there will be some animation which will interact with user like swiping a panel with an background image. I implemented it by using Css translation. It works fine in browser(both chrome and safari) and in iphone. I use MGWT to create the home page with a scrollPanel in the middle, after clicking the items in the scrollPanel, a touchPanel will swipe to the center to cover the homePage. This swiping animation is done by Css translate3d(x,y,z).
However, when I deploy the application to iPad 4, the background color(using css) start flickering during the panel translation. the scrollPanel in the home screen keep flickering for around one seconde( I guess it is rendering), part of the items disappear and the part of the white background ground is show. The problem also appear in the touchPanel's content. I tried some suggested solution like hardware acceleration using translate3d(0,0,0) but seems it doesn't work.
Do any body know why? Please help, thank you.
I am stumped as to why my styling is so distorted when I use firefox.
The website is http://shehunter.joshmu.com
Could it be related to the fact this site at the moment is being worked on via a public dropbox url?
Font, positioning and background transparency seem to all be wrong.
Works fine in chrome and safari.
EDIT-
when i click on the info tab the text is displaced far to the left...
in the 'music' section there is a transparent blue background appearing...
UPDATE-
info section solved with position:absolute cheers #sarcastyx!
however still have problems in firefox with it accepting google web font and background transparency problem in the music section of the site.
Thanks for all the help everybody!
Looks good in firefox for me. Screenshot:
I can't get my dashcode web clip icon to show up, it just shows the safari generated icon. I have tried using dashcode to design it, then I used the code
<link rel="apple-touch-icon" href="Images/WebClipIcon.png">
I also tried adding a file named apple-touch-icon.png to the root folder and that still didn't work. I have run the site on the simulator, my iphone, and my ipad and the custom web clip icon will not show up. Does anyone have a suggestion
Update: I just created a new dashcode project and tried adding a webclip icon and it still won't work. This is really starting to frustrate me.
You need to add the image to the image file that is outside the mobile photo
I will add 1 thing that caused this issue for me. After trying all of the documented fixes, I tried adding a background color to my icon. Originally, I had a transparent background. Once I added a background color to the .png file, it all just worked.
My steps:
Use GIMP to create a 72x72 image with 7 layers and a transparent background layer.
Save a copy as apple-touch-icon.png and add to my web app's root folder.
Launch the website on my iPad 2 running IOS 5.0.1.
"Add to Home Screen"
RESULT: A black icon on the home screen.
Back in GIMP, fill the background with a color.
Overwrite my .png file.
Back to iPad safari to reload the site.
"Add to Home Screen"
The icon shows up now as documented.
My conclusion: sufficient or well placed transparent areas in the icon image will prevent iOS from accepting it as valid and cause it to be rejected.