Anyone who has been doing web development over the last decade or so has probably faced a situation like this:

I want to use this shiny new JS API/CSS feature, it looks cool!

Wow, I tested it on Chrome and it looks great!

Now I'll test it on the other browsers... And it doesn't work 😢

I know I've been there, and you probably have too, in fact, these kind of browser compatibility problems are so common amongst web developers that they were ranked as the top frustration web developers and designers face in the recent Web DNA Report 2019 by Mozilla. No matter the region, gender, years of experience, or anything else, it's just the top pain point of the current web ecosystem apparently.

And, as of recent years, many times the Chromium team is the first one to implement the newest JS and CSS features and you end up having to drop a feature or include a polyfill due to other browsers not supporting it.

However, as you can tell from the title of this article, that's not always the case, and I'm about to show you an example on how sometimes Chrome does work in weird ways.

The Problem

For a project I'm working on, the designers wanted to include a vertical progress bar divided in small segments with a gradient that went through all of them, basically something like this:

Fortunately, they went for a different idea in the end, but when that was first proposed I was thinking on if there was a way to do this without relying on using images just with CSS.

Eventually, I found out that by using a combination of background-size: cover, background-attachment: fixed, and background-image: linear-gradient(params) in all of the colored segments I could achieve something really close to what I needed.

I was really pleased, I started testing and ended up with the following code:

And while testing this in the browsers I have access to I ended up with this sample

Wait what!? 😵

As you can see, for some reason only Chrome for Android can't display this as intended even when Chrome for Mac OS can.

I found this really weird, I mean, for the most part Chrome for Android and Chrome for Desktop support the same features.

The more I investigated the weirder it got, according to CanIUse Chrome for Android should display it properly while iOS Safari shouldn't, but the tests I did throw completely different results.

Finding the reason

Then I stumbled upon this StackOverflow Question, according to the answer provided here, background-attachment: fixed was actually supported for a while but ended up being dropped due to performance concerns.

I can somewhat understand this, but it still baffled me that iOS Safari (iOS Chrome too since it's basically the same), Firefox for Android, and even IE11 support this while Chrome for Android doesn't.

Conclusions

In the end, I couldn't find another way to achieve this effect for all the browsers I was testing without including images or lots of JS code.

Fortunately I didn't end up needing it, though, if you have other ideas please let me know, I'm curious.

I just wanted to show that, while Chromium is an excellent browser engine and its team does some great work to try to advance what we can do in the web, in the end, they too can decide to just not support something that other browsers do.

Of course, finding examples of this is much much rarer than say finding problems with IE, the old Edge, or Safari, but it still happens and I feel we should never forget about that.

Feel free to post other similar examples in the comments, it's always good to know them.