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.
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;
}
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!
On my iphone phonegap app, whenever I've got text on a background color, the text seems to get a ghosting effect, the same text is repeated 2 or 3 pixels below, almost like a drop shadow but exactly below and in the same color as the text.
Any ideas how to get rid of this? I'm guessing its applying some kind of -webkit specific styling but I can't seem to find what it is.
Below is an image of what is happening, the text to the left, 'Web Deal' is the problem, whereas the text on the right is fine.
Ok, I managed to fix this, it was picking up a text-shadow property from jquery mobile css. It was applying it to all text but because its white it was only visible on text with a background colour. Thanks for your help
Please post your css.
If you are able to open the app on Chrome browser on a desktop, try inspect element and you can find which styles are applied to the text.
As you didn't provide any CSS I'll just assume that your text ist rendered bold.
Rendering bold type in mobile Safari or the WebView is buggy and causes the weird effect.
Try using a text-shadow instead.
.bold {
//font-weight: bold;
text-shadow: 0 0 0 2px white;
}
In recently testing a web application on Windows/Mac desktop browsers - and then on an iPad I noticed various differences in Safari that I wasn't expecting. Even though the version # is the same.
I'd like to compose a list of those differences (for myself and others) to have as a developer reference.
e.g. in Safari on the iPad
iPad Safari takes full control of Select list/option styling
iPad opens the onscreen keyboard when an input element receives focus, thus inline floating calendar widgets (and the like) may not work as expected (or need to be altered)
iPad Safari doesn't support position:fixed like desktop Safari < iOS 5
iPad Safari (similar to iPhone/iPodTouch Safari) automatically hyperlinks 10 digit numbers to offer phone #/contact options
iPad Safari prompt('long message...','default'); shows only 1 line of the message (though it does provide scrolling of the message
I've heard from others that certain JavaScript doesn't work, etc. etc. but I have yet to fully test it thus I'd be grateful for any discoveries that you may have encountered.
A few more for you:
No Flash
Lousy iFrame support (so facebook like etc. needs a custom implementation for iPad)
Weird caching limitations
HTML textAreas doesn't get a scroll bar (you have to double-finger swipe - which of course, is amazingly intuitive)
In general. Treat it like a scaled up iPhone, not a scaled down Desktop.
I thought this might be useful: Apple's guide to preparing web content for the iPad
Just been caught out by the position:fixed issue my self
Safari on iPad has the same issue with button width/padding as on the iPhone
iPhone <button> padding unchangeable? describes this problem and a solution for removing padding on a button with text, but this does not help you if you want a button to be narrower than the padding itself (e.g. for a button that only has a small icon on it). To do that, I had to surround the button with an outer element with a defined width and overflow: hidden like so:
<span style="border: solid 1px blue; display: block; width: 16px; overflow: hidden">
<button style="-webkit-appearance: none; border-width: 0"> </button>
</span>
(the blue border is to show where the button is, it's not critical to the hack)
jQuery's offset() doesn't work: http://bugs.jquery.com/ticket/6446
It also looks like iPad Safari has issues with elements with overflow:auto; that therefore should show scrollbars (test page with div's and iframe's).
iPad Safari seems to have trouble handling background images in rare cases, showing weird lines of lower lying content.
There's not a lot about this in Google (yet).
iPad browser doesnt support file uploading(even if it supports it will useless as iPad does not have a standard File Browser). The file field appears with a Choose File button grayed out.
Beside doesn't support scrollbar in TextAea, it seems that we can using javascript to make text in TextArea selected automatically too.
This code will only move cursor to the end of text in TextArea.
<div>
<textarea id="text-embed-code" autocapitalize="off" multiline="">
There is a fox running after chrome.
</textarea>
<button onclick="testSelectText(event);">select text</button>
</div>
<script>
function testSelectText(e) {
var box = document.getElementById("text-embed-code");
box.select();
e.preventDefault();
return false;
}
</script>
There appears to be a bug in iPad Safari where a CSS element with both a background image and a background color is rendered with a slight border in the color of the background color. It should fill with the background image all the way to the edge of the rendered element.
I just had the same bug on my site, when trying to view it on an Ipad. The HTML structure is like:
<div class="main"> <!-- background-color: white -->
<div class="left"></div> <!-- background-image: url(some_transparent_png) -->
<div class="content">...</div>
<div class="right"></div> <!-- background-image: url(some_transparent_png) -->
</div>
The left layer uses a background-image, whereas the main layer uses just a background-color. The Ipad view shows a slight border at the edge of the left and right layer.
When i add
-webkit-background-size: 100% 100%;
to the left and right layer, the border disappears.
You can now control the styling of select lists on iOS by resetting it with -webkit-appearance: none;
This rule fixes animation flickering in Safari on iOS devices:
body {-webkit-transform:translate3d(0,0,0);}
There appears to be a bug in iPad Safari where a CSS element with both a background image and a background color is rendered with a slight border in the color of the background color. It should fill with the background image all the way to the edge of the rendered element.
24 bit transparent PNGS ABOVE A CERTAIN FILE SIZE don't render on the iPad2.
I can however get 8 bit ones of the same dimensions to render.
I haven't found out what this maximum file size is in order to get them to render.
I'm currently working on a small responsive web-app which makes heavy use of the iframe youtube api. Apparently the ipad version of safari doesn't support a few html5 methods which I use heavily in this project.
One of them is window.postMessage, which is a way of interacting with scripts on other pages, for example the a script that is used "within" that iframe. Autoplaying videos also doesn't work.
Frame problems. iPad Safari will both hide scrollbars and expand frames to the size of their content.
Changing the frame tag to include scrolling="yes" and noresize="noresize" appears to do nothing.
Some sites look fine on everything, even a Dreamcast browser, but not on iPad. The issue can be fixed using tables and iframes instead of normal framesetting (cols and rows, etc).
I also discovered that contenteditable is not supported in mobile safari, thus using a plain textarea is a better bet. Apple Developer Docs
position: fixed;
Does not work in iOS 4 but does work on iOS 5.