Different gradient color in chrome and safari - css

I'm trying to render gradient and it's collor is different on safari and chrome. How to make it identical? (Left - chrome, right - safari).
https://codepen.io/max-frai/pen/XWMEQZJ
<div id="test"></div>
#test {
width: 400px;
height: 300px;
background: -webkit-linear-gradient(top, rgba(102,182,252,0) 0%,rgba(63,82,111,1) 100%);
background: linear-gradient(to bottom, rgba(102,182,252,0) 0%,rgba(63,82,111,1) 100%);
}

You can find a good explanation of what is going on here. Basically, this has been in the working draft for years now, and Safari is the only major player who hasn't fixed it. See current status here:
Partial support in Safari and Older Firefox versions refers to not
using premultiplied colors which results in unexpected behavior when
using the transparent keyword as advised by the spec.
I guess if you were desperate, you could calculate the gradient yourself and put in a lot of stop points. Otherwise just wait for Apple to fix.

Related

Background-image and background not working on mobile/underlining is driving me crazy

I'm working on a website that includes a lot of anchor links, some of which are a different colour to the text itself. This hasn't been a problem for 90% of development and I went forward with standard text decoration for regular links and background-image with a linear-gradient for the coloured links so I could animate them into highlighting
I noticed that those coloured links weren't working at all on mobile though. Sure, no problem, I'll try another method. I tried a lot of methods.
The first was switching everything up to border-outline and this is when I realised that I liked the thicker line on the regular links. Unfortunately this didn't work because the links are inline in paragraphs and changing the line-height (I used that to change how far the underline is beneath the text) broke the paragraphs.
What I'm currently trying is bringing in a 1x2 pixel image and using that as the background image with repeat-x and it looks great! On desktop. Neither Chrome nor Firefox for mobile (the ones I've tried) even show the underline.
I've put in all of the media queries already and adjusted this stuff for each size screen, but still no luck
TL;DR - I'm using a background image to underline text and it's great on desktop but doesn't show at all on mobile. Any advice or tips on an underlining method that will for sure work?
Here's the underlining code I'm using:
a {
color: var(--font-color-main);
text-decoration: none;
background-image: url('../assets/blackunderline2.png');
background-position: 0 22px;
background-repeat: repeat-x;
}
And here's what I'm using on the coloured highlights (also doesn't work on mobile, and I am happy to switch this to the pixel approach if that works!)
/* Safari 4, Chrome 1-9, iOS 3.2-4.3, Android 2.1-3.0 */
/* Safari 5.1, iOS 5.0-6.1, Chrome 10-25, Android 4.0-4.3 */
/* Firefox 3.6 - 15 */
/* Opera 11.1 - 12 */
/* Opera 15+, Chrome 25+, IE 10+, Firefox 16+, Safari 6.1+, iOS 7+, Android 4.4+ */
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(80%, orange), color-stop(90%, transparent));
background-image: linear-gradient(orange 80%, transparent 90%);
background-image: linear-gradient(orange 80%, transparent 90%);
background-position: 0 1.04em;
background-repeat: repeat-x;
background-size: 7px 8px;
So I hooked my phone up to the dev tools on my development PC and found out that (for reasons I'm unsure of right now) the line height was changing on mobile only despite the desktop media queries being fine.
This meant that the underlining I was doing with the background image was too low to be visible so I shifted it up and now we're golden!

CSS problems on android device

I have a pretty simple navbar, which has it's background defined by using CSS's, background-image property with the linear-gradient function. It works great in every latest desktop browser, and it also works in Android 4.4+ browsers too. But when I am testing it on a 4.4- Android device, the backround is not visible. I've checked caniuse.com which says the following things:
that background-image property works only partially on Android 4.3- (size is not supported which I am not using anyways)
that linear-gradient function on Android 4.3- works only with the -webkit- prefix
So this would be my problem, I tought, and tried to implement a webkit version of the same css property, but to no avail. I can't make this work, what could I be doing wrong? Here's the css rule that I am using, and below it, you will find some additions that I have tried, but without success. The background appears correctly on desktop browsers, but it is invisible on mobile devices(tested it with a physical Galaxy Express, with 4.2 Android, and with a bunch of other 4.3- Androids on BrowserStack).
.converser_navbar {
height: 50px;
background-image: -webkit-linear-gradient(to bottom, #6374B6 0px, #3D538C 100%);
/* this is the webkit version, tried putting it after and before the non webkit version,
neither one works, also tried using ONLY the webkit version, that only disables the
background on the desktop browsers too, also tried prefixing background-image
with -webkit-, but that also does nothing at all */
background-image: linear-gradient(to bottom, #6374B6 0px, #3D538C 100%);
border-bottom: 2px solid #898989;
color: #FFF;
position: relative;
z-index: 10;
top:0;
transition: all 0.6s;
}

Bad looking linear gradient at Firefox

I'm giving my a linear gradient but in Firefox, even new versions, what I get is something like bars of solid color building the gradient. This is what's in my CSS:
background-color: #d3d3d3;
background-repeat: repeat-x;
background: -moz-linear-gradient(top, rgba(145,145,142,1) 0%, rgba(253,253,253,1) 99%);
background: -webkit-gradient(linear, left top, left bottom, from(#d3d3d3), to(#fcfcfc));
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#d3d3d3',endColorstr='#fcfcfc');
background: -o-linear-gradient(rgb(211,211,211),rgb(253,253,253));
According to this, it is most unlikely you are facing a version problem. Firefox, as usual, was the first to implement a standards-compliant (no prefix) CSS property (and it has already been 9 versions back).
Try removing the background-repeat property as it is mostly useless for gradients unless you've set a background size. If it solves, I'd recommend posting a bug report on Bugzilla. Does it work well on IE10 and Chrome?

CSS Gradient in IE8 Disables my Dropdown menu

Website in question: http://atlanticsig.creativecurvedev2.ca/
A little background... This is a development site for a client that I am building in MODx using the Wayfinder extension for the menu and Ultimate Dropdown for the sub-menu. I am using CSS gradients to produce the pretty background color for the menu.
My issue is that in IE8, the drop-down menu does not display for the header navigation when I incorporate a "filter" gradient background color. Only the IE8 browser has this issue; even IE7 works properly. The drop-down menu is there, technically, because the cursor can click on the sub-menu links, but the browser refuses to show them.
I have fixed the issue by using a repeated background image for IE8, but I really didn't want to go this route; I thought for sure there should be a CSS solution, which is why I am posting this; my curiosity is piqued and I would like to see what the real issue was.
I was able to track down the issue to this line of code:
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 ); /* IE6-8 */
As soon as I removed this line from the following block of code, the drop-down menu would work fine in IE8, however the gradient would disappear:
#header_menu {
background: -moz-linear-gradient(top, #003764 0%, #3b6b89 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#003764), color-stop(100%,#3b6b89)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #003764 0%,#3b6b89 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #003764 0%,#3b6b89 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #003764 0%,#3b6b89 100%); /* IE10+ */
background: linear-gradient(to bottom, #003764 0%,#3b6b89 100%); /* W3C */
background-color: #003764; /* Old browsers */
height: 38px;
width: auto;
}
I tried a number of fixes in the HTML and CSS, including various arrangements of the gradients, applying the gradients to different elements, applying various heights/widths/position values to my containers and menus, playing with z-index values, adding extra blocks, etc.
In the end, it always seemed to come back to that "filter" line (I even tried -ms-filter-).
If you would like snippets of any other pieces of code, just let me know. This is a pretty interesting issue that I has made me genuinely curious to solve.
In all honesty, using IE's filter style is always asking for trouble -- it has a whole load of bugs and quirks that can break other stuff unexpectedly.
So what are your options?
You could try using CSS3Pie to render your gradients. It uses VML rather than filters, so it won't suffer from the same bugs. (or you could write the VML code yourself, but that would be tedious)
Or you could use a graphic for the gradient in IE8. You could arrange the CSS code such that the standard CSS gradient overrides the background graphic, so other browsers could carry on using the CSS gradient and wouldn't need to know about the graphic.
Or you could just accept that IE8 is an old browser and give it a plain background rather than a gradient. It may not look as pretty but it'll still work, and people still using IE8 are probably used to seeing sites these days that don't look their best.

background gradients in IE7 with CSS

I am using the following bit of CSS to create a linear background gradient. It seems to work just fine in IE8/9, FF, Safari and chrome but not in IE7. IE7 shows a solid (green) background. Here is my code
.menu_body a {
display:block;
color:#006699;
background: #008800;
/* Mozilla: */
background: -moz-linear-gradient(top, #0b71a4, #025f8e);
/* Chrome, Safari:*/
background: -webkit-gradient(linear,
left top, left bottom, from(#0b71a4), to(#025f8e));
/* MSIE */
filter: progid:DXImageTransform.Microsoft.Gradient(
StartColorStr='#0b71a4', EndColorStr='#025f8e', GradientType=0);
padding: 1px 18px;
}
In IE<=7, filters won't work unless element has layout.
zoom: 1;
Be aware that it can break other things, so old good background-image might be safe and reliable solution.
Also please note that your CSS lacks gradient properties for Opera, IE10 and updated syntax for Webkit.
The correct syntax is:
filter: progid:DXImageTransform.Microsoft.gradient
(startColorstr=#550000FF, endColorstr=#55FFFF00)
This is supported by IE4>
See the MSDN source here.
I'm unsure if the parameters of this transform are case sensitive - but seeing as most other CSS is, you could try:
startColorstr='#0b71a4', endColorstr='#025f8e'
Notice the lower-case starting character, and lower-case str suffix.

Resources