8

I'm using Microsoft Edge 40.15063.0.0 on Windows 10 for browsing, and when I look in the footer, I see something odd:

Stack Overflow logo in footer on Meta

The logo is all red on Meta. On Main, it's a lovely blue:

Stack Overflow logo in footer on Main

Granted, I might be the only person to browse SO using Edge, but it was a little surprising to see this.

I do not see these colors in Chrome Version 59.0.3071.115 (Official Build) (64-bit).

12
  • 6
    Really nothing we can do about that. Edge is blatantly ignoring the fill values in the SVG. That's completely a problem with the browser.
    – animuson StaffMod
    Commented Jun 28, 2017 at 16:00
  • 10
    Don't feel bad; there are 8 other people who also use Edge.
    – Shog9 Mod
    Commented Jun 28, 2017 at 16:07
  • And here I was naively starting to think the tyranny of Microsoft's browsers breaking web standards, and forcing everyone to come up with IE-compliant hacks and contingencies, came to an end...
    – Dragomok
    Commented Jun 28, 2017 at 16:07
  • 15
    No way, @Dragomok. IE-compliant hacks are fast becoming a thing of the past. We call them "Edge-cases" now.
    – Shog9 Mod
    Commented Jun 28, 2017 at 16:09
  • Thanks @animuson I didn't realize that was an issue with Edge. Good to know. If it's not already an issue on their bug tracker thing I'll add it. Commented Jun 28, 2017 at 16:17
  • 1
    @MikeMcCaughan Looking into it more, it seems to be a problem with their attribute selector or fill property. E.g. these are all being ignored by Edge, but applied by other browsers: .s-footer._short .-logo path[fill="#222426"]{fill:#0C0D0E}.s-footer._short .-logo path[fill="#bcbbbb"],.s-footer._short .-logo path[fill="#BCBBBB"]{fill:#BCBBBB}.s-footer._short .-logo path[fill="#f48024"],.s-footer._short .-logo path[fill="#F48024"]{fill:#F48024}
    – animuson StaffMod
    Commented Jun 28, 2017 at 16:17
  • 1
    @animuson Looks like Edge is being case-sensitive with the attribute name: document.querySelectorAll('.s-footer._short .-logo path[fill="#222426"]') returns an empty NodeList, but document.querySelectorAll('.s-footer._short .-logo path[FILL="#222426"]') returns a NodeList with the correct element... Commented Jun 28, 2017 at 16:22
  • 5
    Heh leave it to Edge. I suppose an easy fix that doesn't break anything for anyone else is to just lower-case those attributes in our SVG. (Though this really should be reported to Edge because that's not how it should work.)
    – animuson StaffMod
    Commented Jun 28, 2017 at 16:34
  • 5
    Interesting - I've seen this bug long time ago when I was working on footer and I was pretty sure I fixed it (it actually still works on my MS Edge 38.14393.1066.0 - which seems to be older than yours). i fixed the issue because my version of Edge was case sensitive but only for value.. According to your investigation it seems like newer Edge is also case-sensitive for attributes name.. Anyway, I will take a closer look at this. I just need to find someone (around) using Edge....
    – Paweł Staff
    Commented Jun 28, 2017 at 17:07
  • Well, I added "Feedback" via Microsoft's Feedback Hub: aka.ms/Mk13o7, as that seems to be their preferred method. We'll see what happens. Commented Jun 28, 2017 at 17:52
  • I lost a bet. I bet no one was using edge. Thanks bro.
    – PhillyNJ
    Commented Jun 28, 2017 at 22:23
  • That was not a good bet, @Philly. There are still people using IE 6.
    – Cody Gray Mod
    Commented Jun 29, 2017 at 10:45

1 Answer 1

4

Paweł adjusted the selector/SVG to match casing, so Edge can find the right elements and style them.

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .