I have an iOS web app. I have the following css applied
body{
background-color:red;
}
This red background shows up in iOS safari but when I save it to the home screen the background is white.
Why is this happening and how can I fix it?
I'm sorry but I wasn't sure whether you were talking about the home screen icon or the website background color.
1. If you mean that the icon is getting white you can fix this by a meta tag:
<link rel="apple-touch-icon" href="the/url/of/your/icon-image" />
2. If you mean that the background color is white instead of red, I would suggest that you just put it as inlin styling, like this:
<body style="background-color:red">
Or you can use the background property, so your css will be like this:
body {
background:red;
}
I hope this answered your question and that it will work!
Related
We have an e-commerce app that sends out order details when a purchase is made, and we just redesigned that email template. We've received reports over the past few days of some customers having half the text in the email missing.
After finally getting a screenshot, we've learned that the issue is happening on iPhones using dark mode. So far they've all been customers using gmail with either the Mail app or with Safari (both have the same problem). I'm not sure if the gmail factor is relevant or a coincidence.
Our email is simple -- it has a white background, gray headings, and black body text. Dark mode is leaving the white background and gray headings untouched, but the body text is being changed from black to white. On the white background, the white text is obviously invisible, and the email looks like it's missing large amounts of content.
Is there anything that can be done to prevent dark mode from changing our text from black to white?
I should note that we also have a QR code embedded in the email, so I'm concerned about solutions that would allow dark mode to proceed in recoloring our full email, as I believe it would make it harder for the QR code to be recognized.
Edit: this is not related to any app code, so guidelines on developing iOS for dark mode don't apply. This is simply an issue of how Apple's Mail app on iOS 13 in dark mode is displaying an HTML email.
You can forcibly remove this on Apple devices, but now we have Gmail and Outlook on Mac without a way to stop them.
Simply put this in the <head>:
<meta name="color-scheme" content="only">
"Only" is short for "Light only" (which also still works)
That will fix for iPhone dark mode and Apple Mail but not Outlook on Mac or Gmail.
You can currently override Outlook on Mac, but there is no known hack for Gmail.
Here is how to override for Outlook on Mac:
<style type="text/css">
.body, .darkmode, .darkmode div { /* With class body on the body tag, and all elements represented here that have a background color */
background-image: linear-gradient(#ffffff,#ffffff) !important;
}
.darkmode p { /* Add other selectors for other text elements */
-webkit-text-fill-color: #000000 !important;
}
</style>
HT to Brian Thies on Litmus forum for this
But it's best to try and fix the root problem, rather than remove a functionality (dark mode) that your customers want.
Apple have provided such a way, with this in the <head>:
<meta name="color-scheme" content="light dark">
<style type="text/css">
#media (prefers-color-scheme: dark) {
.darkmode { background-color: #1e1e1e !important; }
.darkmode p { color: #ffffff !important; }
}
</style>
Also, ensure your outermost element with the background-color has the class "darkmode", e.g.
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td align="center" class="darkmode" bgcolor="#ffffff" valign="top" style="padding: 0px 15px;">
So by default, you'll have white background, black text; and on dark mode it will be a dark background with light text.
(Please supply the code for any further queries.)
Thanks to the link provided by #FrankSchlegel
https://webkit.org/blog/8840/dark-mode-support-in-webkit/
using color-scheme: light only in the css on all elements was the answer. Thank you!
It sounds something fishy but I also had same problem in our company. The dark mode was making our mail look disgusting.
The solution we got to this problem was by adding a image ( i.e. logo
of our company in the email footer).
This fixed the dark mode issue and the email began to look same on both modes as like we designed. This is a simple hack and hope that other people will also get benefited from this.
I built a website for myself which I believe is responsive as per my testing with Firefox's responsive mode. I tested all the pages with the iPhone resolution (375*667) both landscape and portrait mode and it worked great.
However when I try to open the same site in Chrome, it does not display properly. It also shows the same effect when viewed from an iPhone.
This is my site - http://v1chu.github.io/
The background images in used in section 2 and 3 are missing whereas it is working fine with Firefox (also in responsive mode). I can't see the background in my device as well.
Also the site content looks very small when viewed in Chrome and device. But it looks just fine when viewed in Firefox.
Please tell me if the way I have built the site is right or not ? Or if something that I have missed which messes up the site on Chrome and devices.
You're heading in the right direction.
Problem #1, Background Images
Your background images don't appear because you are using the background-attachment property with the value fixed. It sets the background in relation to the viewport (browser window). You're basically pinning the background image to the top of the page and by the time you get to your 2nd and 3rd sections you've scrolled past the background image.
You have set background-attachment via the shorthand background property. Remove fixed from the background property.
background: url( '../img/aboutme.jpg' ) no-repeat center;
Problem #2, Text size
You need to use a responsive meta tag. Here's one that I use:
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
The problem seems to be here:
.s2 {
background: url(../img/aboutme.jpg) no-repeat center fixed;
}
I removed the fixed and the background displayed in chrome
s2 {
background: url(../img/aboutme.jpg) no-repeat center;
}
Does anyone know why this is happening?
I want both checkmarks to be white, but the :after element is black (however it seems to have a vertical white to black gradient).
It works in Chrome and Safari on a MacBook.
Open this example page in Safari on an iPhone to see the issue:
http://output.jsbin.com/lerudihiho/
(and here is the code: http://jsbin.com/ponamazoso/edit?html,css,output)
The fix here is similar to when you're using U+2714 in HTML: you need to add a U+FE0E VARIATION SELECTOR-15 directly after the check mark to tell iOS to draw it as an outline rather than a bitmap. Here's what this looks like in CSS:
body::after {
content: "\2714\fe0e";
color: red;
}
When HTML5 pages load in Safari mobile, there is a split-second flash of white before the content displays. Sort of like the old' "flash of unstyled content (FOUC)" problem, but with a white screen instead... call it a "flash of white (FOW)" problem.
Anyone else seen this? How can I get rid of it? I've tried everything I can think of:
Setting the body background color to black, at the top of my first style sheet.
Setting the body background color to black, way up in the head, with a separate style tag:
<style type="text/css">
body {background: black }
</style>
In my desperation, I even resorted to adding (gasp!) an inline style to the tag:
<body style="background: black">
Nothing seems to work... I get this annoying flash of white every time I load a page.
Any ideas?
Thx, Keith :^)
I've created a site and the phone number on the top of the screen is normally brown through CSS, but when I'm opening it in iPad it becomes blue, I know that there are functonality to call around it, but how can I change it's behavior (just change the color)?
Add this meta to your HEAD tag:
<meta name="format-detection" content="telephone=no">
But, if you are using Objective-C (loading the HTML on a UIWebView) and want to prevent the phone detection on all pages you can set:
_webView.dataDetectorTypes = UIDataDetectorTypeNone;
I prefer not to disable the functionality but override the color;
a[href^=tel] {
text-decoration:inherit;
color: inherit;
}