CSS Issues with CAS 6.3 and IE11

[Dustin J Luck]

I have found compatibility issues with CAS 6.3 in IE11 (screenshot below). I have identified two distinct issues.

1. Icons are not displayed
2. Flex elements are not properly sized

I have tried to figure out what I can change on my own, but haven't made any progress. Personally, I'd be fine telling people not to use IE, however, we have at least one SP (Adobe Acrobat on Windows) that uses IE for its SSO process and can't be changed.

Is there anyone out there with the CSS skills to take a look at this and offer a solution?

[Alan S]

I'm looking at this blindly, but you may be able to solve it with a media query in your CSS for targeting that browser:

```css

@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {

  main {

    display: block;

    min-width: 640px;

    width: 100%;

    /** or do whatever else is needed to force it into submission... **/

  }

}

```

You might have to specify an element other than `main` (whichever one's being unruly).

-Alan

[Dustin J Luck]

Thanks, Alan. I'm pretty sure I'm seeing some sort of IE incompatibility with flex boxes for issue #2. I checked out all the issues documented in flexbugs, but didn't see anything that helped.

Issue #1 seems like an issue with the icon font not displaying properly.

[cski]

Dustin, I was in the same situation you were/are with a single SP reliant upon IE 11. Have a look at the following pull request: https://github.com/apereo/cas/pull/5078/files. I was apply to apply the changes in 6.2.7 and it corrected the Flexbox issue. Still need to figure out the issue with the icons not displaying properly.

[Dustin J Luck]

Thanks, cski.

I was able to fix my flexbox issue with that pull request. Once that fix was applied, it revealed another issue with the field labels that was solved by pull request #5068.

As far as the icon issue, I tracked it down to the cache-control and pragma headers. The way CAS is handling these appears to be a security setting, but I don't know how to change the behavior. Instead, I added the following line to layout.htm directly below the stylesheet link for mdi-font.css. This has the effect of loading the Material Design Icons CSS and font files twice in IE only, but that's a price I can live with.

<link rel="stylesheet" type="text/css" href="https://cdn.materialdesignicons.com/5.4.55/css/materialdesignicons.min.css" media="all and (-ms-high-contrast: none), (-ms-high-contrast: active)">

Hope that helps!