IE11 with white theming doesn't show black app icons

[MorrisJobke]

Safari ✅:

Edge ✅:

IE 11 ❌:

Also happens on stable12.

cc @nextcloud/designers @nextcloud/theming

@jancborchardt Could you have a look at this?

[MariusBluem]

The theming-icon looks a bit pixelated on Edge too :(

[MorrisJobke]

The theming-icon looks a bit pixelated on Edge too :(

That's due to the shitty resolution of the VM. This ticket is about the non-visible app icons on IE11.

[juliusknorr]

I thought that was already fixed some time ago, let me check what's wrong there.

[jancborchardt]

This is because filter as we use is not compatible with IE11 as discussed in #5593, right? I checked around and saw this blog post which refers to this jQuery plugin to make it work for IE11 and IE 10: https://shekhardesigner.github.io/InvertImages/

@juliushaertl but if you can make it work without JS I guess that’s preferable. (cc @pixelipo @skjnldsv cause you were also involved in the issue discussion I mentioned.)

[skjnldsv]

Not fond of the jquery plugin.
We could use svg filters https://jsfiddle.net/g97e26pa/180/

[MorrisJobke]

Not fond of the jquery plugin.
We could use svg filters https://jsfiddle.net/g97e26pa/180/

I would also use only a minimal approach - if we have sag filters that only apply to IE -> perfect.

[pixelipo]

plugin mentioned by @jancborchardt does exactly that, @skjnldsv @MorrisJobke :) It applies SVG filter to SVG icons in IE, while "falling back" to default CSS3 filters for other browsers (Firefox, Chrome, Edge).

There's no way we can implement SVG filters selectively without JS. In addition, this solution doesn't mean that we have to apply filters directly inside SVG files (which would cause them to double in filesize and add some maintenance overhead).

[pixelipo]

Code in that plugin is quite simple and less than 2 kB minimized. We could also work out our own, simplified method and add it straight into our JS code (so that we don't have to worry about source)

[skjnldsv]

There's no way we can implement SVG filters selectively without JS. In addition, this solution doesn't mean that we have to apply filters directly inside SVG files (which would cause them to double in filesize and add some maintenance overhead).

We could also directly add this in the app menu generator, and not use anything. We won't have svgs to maintains at all and we should be able to apply the filter with css too (without the filter css3)