The problem with dark mode background in the HTML email template is specifically affecting iPhone 11 and 12 Mini devices, and it is occurring only

Encountering issues with our html/oft email template in dark mode view specifically on iPhone 11 and 12 Mini versions.

The problem arises only under the editable text section, where instead of displaying a black background color as intended by the dark mode CSS, it appears differently compared to other devices.

Please refer to the attached error screenshot for a clearer understanding; is an editable part in the edm

Initially, we had a freelancer developer who tested the template on the aforementioned iOS devices and it rendered correctly. However, when I implemented the meta color scheme changes suggested in this reference link , it didn't resolve the issue.

Below is a snippet of how my code looks under the head tag:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:o="urn:schemas-microsoft-com:office:office" style="padding:0;Margin:0">
<head>
<meta charset="UTF-8">
...
CSS and body code snippets follow...

I've also replicated the code on CodePen for easier access 

[here](https://codepen.io/LXR10/pen/NWJbWaJ)
.

If anyone in the community can provide guidance or assistance on this matter, I would greatly appreciate it. Thank you!

htmlcsshtml-emailemail-templatesios-darkmode

Answer №1

Unsure about the specific quirk related to those devices, but there is an old bug that could be relevant.

There seems to be a discrepancy between the first and second paragraphs. The second paragraph includes an "!important", while the first does not.

<div style="width: 526px; background-color: #000000 !important;...

I recommend removing the unnecessary div completely. If you want to keep the font, color, or other text styles, consider using a <span> instead.

There is a known bug affecting iPhones with pure white backgrounds, where it fails to display the particular color (#ffffff in the media query). It's unclear if this also applies to #000000, but it's possible. To workaround this issue, try using #fffffe or #000001. You can find more information here: https://github.com/hteumeuleu/email-bugs/issues/65. You may also need to include the following in your head:

<style>
    :root{
      color-scheme: light dark;
      supported-color-schemes: light dark;
        }
    </style>

However, address the initial problem first.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

I am facing an issue where the text on my website is failing to display properly

I am facing an issue where the text on my website renders normally on Android or Windows, but when I run it on iOS, the text disappears completely. It's as if all the text has been set to display: none; The other elements seem to be tucking in just fi ...

htmlcssiostext

Arrow pointing right with a see-through appearance beside the image

I need help placing a transparent arrow on the right side of an image, vertically centered and displaying the background image. After researching solutions like this one, I found this codepen which almost achieves what I want. However, I am struggling to ...

csscss-shapes

My Jquery "animate" is only triggered once instead of on each function call. What could be causing this issue?

I have set my navigation to dock at a specific document height on the top of the viewport, and when it docks, it should display a dropdown animation. $(document).scroll(function(){ var x = $(window).scrollTop(); if(x>=700){ $("header ...

javascriptjqueryhtmlcss

Tapping elsewhere on the screen will not result in the select box closing

I'm currently troubleshooting an issue with the site filter feature. When the btn-select is open and I click outside the panel, the select remains open. I am looking to create an event that will detect when the dropdown is closed so that I can close t ...

javascriptjquerycsstwitter-bootstrap

What is the best way to determine the width and height of text within a TextArea using JavaScript in an HTML document

Imagine this scenario: https://i.stack.imgur.com/cliKE.png I am looking to determine the size of the red box within the textarea. Specifically, I want to measure the dimensions of the text itself, not the dimensions of the entire textarea. The HTML code ...

javascripthtmlangular

Unable to access localStorage

I created a Plunker to store a value in localStorage: <!DOCTYPE html> <html> <script> localStorage.setItem('test', "hadddddha"); </script> </html> Then, I built a test page to retrieve the value from local ...

javascripthtmllocal-storagesession-storage

The datepicker within the dialog box is obstructed

There seems to be an issue that I'm encountering: https://i.sstatic.net/7aFqA.png Whenever I click on the datepicker input, the calendar appears overlapped. This is evident because when I hide the dialog, the calendar displays correctly: https://i. ...

htmlcsstypescriptbootstrap-4datepicker

The issue of incomplete post content display on WordPress pages persists despite making modifications to the style.css file

click here for image descriptionI attempted to make some adjustments in the style.css file but encountered a problem. Now, all the posts on the site are displaying "[...]" after a brief and unformatted snippet of content. Any assistance would be greatly ...

phpcsswordpress

Can the tooltip of an element be changed while the old tooltip is still visible without having to move the mouse away and then back again?

When I have an HTML anchor element with a tooltip that appears when the mouse is hovered over it, and then I use JavaScript to change the tooltip's text using element.title = "Another Tooltip", the new tooltip text does not immediately update visually ...

javascripthtml

Ensuring a consistent height for a Angular JS Auto Complete feature

The ng2-auto-complete results appear to be lengthy. When I try to inspect and apply some CSS, the results disappear upon clicking. To address this issue, I experimented with the following code: ng2-auto-complete{ height: 400px; overflow-y: scroll ...

javascriptjqueryhtmlcssangular

Scrolling in iOS 8 causing flickering problem with background image

Utilizing the Supersized jQuery slider plugin to create a full-page background slider with a fade-in effect and added height for scrolling. The slider functions correctly on desktop, but upon testing on an iOS 8 iPad device, there is noticeable flickering ...

javascriptjqueryhtmlioscss

What is the best way to insert additional text into an li element without replacing the text that is already there using

Currently, I am adding to a list and need to prepend text to an li item whenever the user clicks on a radio button. I attempted using the JQuery .text() function but found that it overrides the existing content instead of appending. $("#" + condition + "- ...

jqueryhtml

Center the span in CSS by setting its position to absolute

I am trying to create a span element positioned as absolute inside a div. The div has top and left values set. When the user inputs text, the span expands with the given text towards the right to contain it. However, I would like it to grow symmetrically o ...

javascripthtmlcss

JavaScript animation is not functioning as expected

I created a div with the id of "cen" and gave it a height and width of 50px. $(document).ready(function() { $("#cen").animate({ height: 500px, width: "500px", }, 5000, function() { // Animation complete. }); }); Unfort ...

javascriptjqueryhtmlcssjquery-animate

Enhancing user experience with CSS dropdown menu animations

I've been working on adding a dropdown transition to my menu, but I can't seem to get it right. Can anyone point out where I'm going wrong or what needs to be added for the transition effect on the dropdown menu? Here is the CSS and HTML cod ...

htmlcsstransition

learn the technique I use to incorporate a see-through background in HTML

Is there a way to enclose a specific section of text with a background to improve readability, considering that changing the text color is not the preferred solution due to an existing background image? ...

htmlcss

Once I incorporated Bootstrap into my project, I noticed a noticeable white space between the div elements

Welcome to My Code Playground I was sailing smoothly with my project until I decided to include Bootstrap. Seems like there's something missing in the details, so here I am reaching out. If you spot the issue, please feel free to correct my code. &l ...

javascripthtmlcssbootstrap-5division

prevent the container from occupying any additional available space

I'm currently working on a project that aims to replicate the functionality demonstrated in this code snippet: .overall-container { height: screen; border: 1px solid black; padding: 2px; } .scroll-menu { overflow-y: auto; border: 1px sol ...

htmlcss

Revamping HTML table with AJAX in PHP

I am facing a challenge with updating an HTML table every second on a page. The table contains several divs and classes. I attempted to use AJAX for this purpose. Here is the HTML code: <div class="abcd"> <div style='float: left;'> ...

javascriptphphtmlajax

The mobile menu toggle functionality is malfunctioning on actual mobile devices, however, it is operational when tested on various mobile sim

Recently, I noticed that on , the menu collapses into a hamburger icon for mobile. However, when tapping on it on my phone and other devices, nothing happens. Surprisingly, it works perfectly fine when clicking on it in mobile simulators within Google Chro ...

csswordpressmobilemenuhamburger-menu