Skip to content

Gmail for Android doesn't support linear-gradient() inline, only in style block #395

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
aOpenbrier opened this issue Jan 30, 2024 · 7 comments
Open

Gmail for Android doesn't support linear-gradient() inline, only in style block #395

aOpenbrier opened this issue Jan 30, 2024 · 7 comments
Labels
Data bug Did we say something wrong?

Comments

@aOpenbrier
Copy link

aOpenbrier commented Jan 30, 2024 •
edited by hteumeuleu
Loading

Linear gradients are ignored when inlined but are displayed from style block. Affects Android but not iOS gmail app

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title>gmail linear gradient test</title>
 <style type="text/css">
  div {height:100px; width:100px;}
  .linear-gradient{
   background-image: linear-gradient(orange, pink);
  }
 </style>
</head>
<body>
 <div class="linear-gradient">
  Style block
 </div>
 <div style="background-image: linear-gradient(orange, pink)">
 Inline style
 </div>

</body>
</html>

Pixel 8 Pro | Android 14

iPhone SE | iOS 16.5
@husseinalhammad
Copy link
Contributor

I am seeing the same. Although it seems to still be working when used in the shorthand background property.

<div style="background: linear-gradient(orange, pink);"></div>

@hteumeuleu hteumeuleu added the Data bug Did we say something wrong? label Jan 30, 2024
@hteumeuleu
Copy link
Owner

I'm not seeing the issue in Email on Acid (https://app.emailonacid.com/app/acidtest/gRxU3h8aZGPqKzaaRl61Xo6soJopk9IlLHL4o2UyZhBVC/list). Could have this been only a temporary issue? Or related to the type of accounts used for testing?

@aOpenbrier
Copy link
Author

aOpenbrier commented Jan 31, 2024 •
edited
Loading

Perhaps temporary, Email on acid is usually not on the latest version. Android is currently on 14 but their latest test device is on 13, so Gmail may not be up to date either. Similarly I've had issues with Gmail for iOS that affected actual devices but were not detected on Email on Acid.

Noting current versions
Gmail for Android: 2024.01.14.599541078.Release
Gmail for iOS: 6.0.240114.1785904

@husseinalhammad
Copy link
Contributor

I am also seeing this on Gmail for Android 2024.01.14.599541078.Release. Tested with a normal @gmail account.

Similar to Email on Acid, I don't see the issue when testing via Testi@ (latest Android version available is 13 too)

@hteumeuleu
Copy link
Owner

Alright, I just checked on device and I see it too. Version 2023.11.26.586591930.Release.

@hteumeuleu
Copy link
Owner

hteumeuleu commented Feb 1, 2024 •
edited
Loading

Any idea why in Can I email’s test (https://www.caniemail.com/tests/css-gradients.html), not a single gradient is working? (Even when removing all <style> blocks or trying different things.) I'm getting weird vibes that this bug is similar to last year’s #343.

@husseinalhammad
Copy link
Contributor

I see a few things:

  • When only background-image is used
    • linear-gradient() and radial-gradient() get wrapped in url()
    • the first 3 characters in linear and radial get stripped
  • When only background is used
    • linear-gradient() and radial-gradient() seem to be kept as is
  • When both background-image and background are present,
    • background-image is stripped
    • linear-gradient() and radial-gradient() in background get the same treatment it gets if it was used in background-image (wrapped in url() and first 3 characters get stripped)

Here is the test code rendered by Gmail Android:

<div id="m#msg-f:1789761868417562721" class="mail-message expanded" style="color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12.8px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: normal; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;"><br class="Apple-interchange-newline">
	<div class="mail-message-header spacer" style="height: 138px;"></div>
	<div class="mail-message-content collapsible zoom-normal mail-show-images msg3347146197074238750" style="overflow-wrap: break-word; width: 352px; display: block; margin: 16px 0px; user-select: auto;">
		<div class="clear"><u></u>
			<div>
				<div style="max-width: 600px; margin: 0px auto;">
					<h1 style="margin: 0px 0px 1em; font: 38px Palatino, serif; color: rgb(0, 0, 0); background: none; border: none;">CSS Gradients</h1>
					<h2 style="margin: 2em 0px 1em; font: bold 16px monospace;">linear-gradient(#e66465, #9198e5);</h2>
					<div style="font: 20px serif;">
						<div class="m_3347146197074238750test1" style="background: url('ar-gradient(rgb(230, 100, 101), rgb(145, 152, 229)'); width: 480px; height: 160px; max-width: 100%;"></div>
					</div>
					<h2 style="margin: 2em 0px 1em; font: bold 16px monospace;">linear-gradient(0.25turn, #3f87a6, #ebf8e1, #f69d3c);</h2>
					<div style="font: 20px serif;">
						<div class="m_3347146197074238750test2" style="background: url('ar-gradient(0.25turn, rgb(63, 135, 166), rgb(235, 248, 225), rgb(246, 157, 60)'); width: 480px; height: 160px; max-width: 100%;"></div>
					</div>
					<h2 style="margin: 2em 0px 1em; font: bold 16px monospace;">linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%), linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%), linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);</h2>
					<div style="font: 20px serif;">
						<div class="m_3347146197074238750test3" style="background: url('ar-gradient(217deg, rgba(255, 0, 0, 0.8), rgba(255, 0, 0, 0) 70.71%), linear-gradient(127deg, rgba(0, 255, 0, 0.8), rgba(0, 255, 0, 0) 70.71%), linear-gradient(336deg, rgba(0, 0, 255, 0.8), rgba(0, 0, 255, 0) 70.71%'); width: 480px; height: 160px; max-width: 100%;"></div>
					</div>
					<h2 style="margin: 2em 0px 1em; font: bold 16px monospace;">linear-gradient(to right, red 20%, orange 20% 40%, yellow 40% 60%, green 60% 80%, blue 80%)</h2>
					<div style="font: 20px serif;">
						<div class="m_3347146197074238750test4" style="background: url('ar-gradient(to right, red 20%, orange 20%, orange 40%, yellow 40%, yellow 60%, green 60%, green 80%, blue 80%'); width: 480px; height: 160px; max-width: 100%;"></div>
					</div>
					<hr>
					<h2 style="margin: 2em 0px 1em; font: bold 16px monospace;">radial-gradient(#e66465, #9198e5);</h2>
					<div style="font: 20px serif;">
						<div class="m_3347146197074238750test5" style="background: url('al-gradient(rgb(230, 100, 101), rgb(145, 152, 229)'); width: 480px; height: 160px; max-width: 100%;"></div>
					</div>
					<h2 style="margin: 2em 0px 1em; font: bold 16px monospace;">radial-gradient(farthest-<wbr>corner at 40px 40px, #f35 0%, #43e 100%);</h2>
						<div style="font: 20px serif;">
							<div class="m_3347146197074238750test6" style="background: url('al-gradient(at 40px 40px, rgb(255, 51, 85) 0%, rgb(68, 51, 238) 100%'); width: 480px; height: 160px; max-width: 100%;"></div>
						</div>
						<h2 style="margin: 2em 0px 1em; font: bold 16px monospace;">conic-gradient(red, orange, yellow, green, blue);</h2>
						<div style="font: 20px serif;">
							<div class="m_3347146197074238750test7" style="width: 480px; height: 160px; max-width: 100%;"></div>
						</div>
						<p style="margin-top: 1.6em; font: 20px serif;"><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/linear-gradient()" target="_blank" rel="noreferrer" data-saferedirecturl="https://www.google.com/url?q=https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/linear-gradient()&amp;source=gmail&amp;ust=1706936349946000&amp;usg=AOvVaw2ZwLSTE5fQlJfSUQgYtlG6" style="text-decoration: none; color: rgb(66, 133, 244);">https://developer.mozilla.org/<wbr>en-US/docs/Web/CSS/gradient/<wbr>linear-gradient()</a></p>
						<p style="margin-top: 1.6em; font: 20px serif;"><a href="https://www.caniemail.com/" target="_blank" rel="noreferrer" data-saferedirecturl="https://www.google.com/url?q=https://www.caniemail.com&amp;source=gmail&amp;ust=1706936349946000&amp;usg=AOvVaw3IdspkzKbOaoalfQZhJf7-" style="text-decoration: none; color: rgb(0, 0, 0);">caniemail.com</a>, 2021.</p>
				</div>
			</div>
		</div>
	</div>
	<div class="mail-message-footer spacer collapsible" style="display: block; height: 0px;"></div>
</div><br class="Apple-interchange-newline">

@husseinalhammad husseinalhammad mentioned this issue Feb 13, 2024
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Data bug Did we say something wrong?
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@hteumeuleu @husseinalhammad @aOpenbrier