[Material Design] Sorting arrows breaking on Microsoft Edge

RobinO

Hi and good morning.

I'm using MDL on a Project i'm working on. When testing the cross-browser Support of the page i saw that the sorting arrows were breaking on Microsoft edge.

Also tested this on the live demo found on the page.

Screenshots can be found here, showing live, local of the edge and live as expected using Google Chrome.
http://imgur.com/a/pnIAb

Hope you can help me with this Problem.

I know that the material Styling is still just a tech preview, but everything works just fine on Chrome and other Browsers, only Edge is causing Problems.

Greetings and have a awesome day,
Robin

allan

This looks a lot like an Edge rendering bug to me. Using its inspect, if I change sorting element's :before pseudo element's bottom parameter to 12px and then back to the default of 11px it works as expected (i.e. exactly as when the page was loaded).

I don't immediately see any issues reported about this in the public Edge bug tracker, so either we'll need to try and put together a simplified test case to confirm it is an Edge issue and submit it, or try to come op with some workaround.

Allan

RobinO

Hey Allan,

thanks for the answer. Can confirm this.

I made a really dirty workaround for this. I added the following to the drawCallback:

$('th[aria-controls="boxes_table"]').addClass('edge--table-fix');
setTimeout(function () {
    $('th[aria-controls="boxes_table"]').removeClass('edge--table-fix');
}, 250);

and this to my css

.edge--table-fix::after, .edge--table-fix::before {
    bottom: 12px !important;
}

The timeout was needed because it would not work on initial render without it. Not 100% sure why. Since I'm only changing the bottom of the pseudos by 1px this has no style impact on other browsers.

As i said, quick and dirty. But works for now, until i can find a better fix for this issue.

allan

That's horrible, but a nice workaround

Allan