search

sfbrigade / bats-server

Routed is an app to help ambulances direct non-critical patients to hospital emergency rooms with the most availability.
https://routedapp.org/
GNU Affero General Public License v3.0
18 stars 12 forks source link

EMS: alert icons show as black boxes on Chrome #192

Closed fwextensions closed 2 years ago

fwextensions commented 2 years ago

Not sure if this ever worked, or a recent PR messed it up on dev:

image

This is in Chrome 103 on Windows.

It seems like a webkit prefix is still required for the mask to work, despite the @supports directive. Changing it to -webkit-mask makes the icon appear:

@supports (mask: url(""))
.usa-alert--warning:before {
    background: none;
    background-color: #1b1b1b;
    mask: url(./img/usa-icons/warning.svg) no-repeat center/contain;
}
fwextensions commented 2 years ago

Apparently, USWDS expects an auto-prefixer to run when compiling the SCSS: https://github.com/uswds/uswds/issues/4478#issuecomment-1021391115

Their gulp tool will do it, but we're not using that. Seems like we'd need to install postcss and autoprefixer and then run them after sass. Without something like gulp, I don't think it'll work when watching the source files, since the watch command will never finish.