Cross browser compatibility issues (formerly IE 11 display issues)

[matikin9]

Dependency

#1898

Overview

We need to have our website be consistent on all browsers including government issued browsers so that our stakeholders can see our site.

Action Items

• ask the research lead to put a link to this issue on Bonnie's agenda with Julien with the following note: ready for contact with ITA regarding browser usage
• Identify current browsers being used by city stakeholders Cross browser compatibility issues (formerly IE 11 display issues) #19 (comment)
• Test website against the browsers
• Determine what we will fix/change if anything

Original issue text

Some ahem government entities ahem are forced to use IE in their offices. It was brought to my attention that the page does not fail gracefully in IE 11. We should look into whether or not there is a simple fix.

[jjandoc]

Any screenshots? I imagine there's probably some CSS grid issues but I'm curious what else is going on.

[matikin9]

[jjandoc]

Totes McGotes CSS grid

[jjandoc]

Some background here for whoever wants to address this. The screenshots in question are broken due to IE11's implementation of CSS grid. Check caniuse.com shows that it should at least be partially supported with an -ms- vendor prefix. We're using the PostCSS autoprefixer to deal with autoprefixing. IE might have its own implementation and syntax that requires a bit more attention than autoprefixing is providing.

[matikin9]

Looks much better now, except there's a lack of space between the project cards. Also, not sure if this is intentional but the project cards are listed in a single column, as if for a mobile screen:

[abregorivas]

There are two major tools for cross-browser testing. However, there their trial versions are short and there may need to be a paid version that can be used across the organization.

• BrowserStack https://www.browserstack.com/
  -LambdaTest https://www.lambdatest.com/

[sacamp]

Progress: Contacted ITA regarding browser usage
Blockers: Waiting on ITA response
Availability: 1 hour
ETA: Pending ITA response

[sacamp]

Progress: Contacted ITA regarding browser usage
Blockers: Waiting on ITA response
Availability: 1 hour
ETA: Pending ITA response

[ExperimentsInHonesty]

Check the following emails to see where Simone sent the message from and add a checkmark to the one she used

• website-research@hackforla.org
• siteresearch@hackforla.org
  Check to see if there was a response. Either way, indicated here in a comment
  If no response, then we need to reach out to them again to ask what the oldest browser they support is
• reaching out to eva.pereira@lacity.org who is the chief data officer, to ask her who at ITA could answer the question.