Report: FF rendering issues

[ebidel]

Lots of cleanup to do in FF.

• The Beta banner is gone
• the check/x's are gone in FF. That's probably because we're using some -webkit-mask-image action. They should really just be background images with background-size: contain.
• The help toggles are checkboxes instead of images

[wardpeet]

what about using autoprefixer? or just a few inline nits on firefox?

[ebidel]

Autoprefixer is available internally at Google, so we could use it if we wanted to.

For the checkbox issue, I think we'll need a different solution than -webkit-mask-image. That's a webkit-only feature.

This would work. Get rid of the mask stuff and use:

background: url(data:image/svg+xml;utf8,<svg width="12" height="12" viewBox="0 0 12 12" xml…L2.33 3.66l1.33-1.33 2.335 2.335z" fill="#FFF" fill-rule="evenodd"/></svg>) no-repeat 50% 50%;
background-size: 12px;

[Janpot]

For the beta banner, it starts working when I url encode the svgs. Seems like firefox chokes on #. (http://stackoverflow.com/a/37683760)
Tried autoprefixer but it looks like mask isn't well supported yet.
background would work but that will lose the flexibility of styling them.

another nice option is inlining them as symbols in the html, then reference them through <use xlink:href="..."> (https://css-tricks.com/svg-symbol-good-choice-icons/). That way you don't duplicate but can still color them with fill or stroke attributes in CSS.

looks like clip-path can achieve similar things as well

[XhmikosR]

Has anybody started working on this? I'm a Firefox user and I could put together a patch to switch to just background image or whatever else you prefer.

We could also just use the :after pseudo selector with the unicode characters in its content.

[wardpeet]

no one did :) feel free to start

[XhmikosR]

I'll do, in the next days. :)

[XhmikosR]

OK, so I experimented with this.

The easiest solution is to do what @Janpot suggested above: URL encode the SVGs.

So far, all SVGs display properly except for the checkbox.

So with this branch this is what I get:

Before

After

Is that an acceptable solution? If so, I'll make a PR.

[Janpot]

maybe something that can/should? be done by a CSS postprocessor?

[ebidel]

Since we only have a few of these, introducing new tooling to urlencode seems overkill.

I was able to get this working in FF:

background: url('data:image/svg+xml;utf8,<svg width="12" height="12" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg"><title>poor</title><path d="M8.33 2.33l1.33 1.33-2.335 2.335L9.66 8.33 8.33 9.66 5.995 7.325 3.66 9.66 2.33 8.33l2.335-2.335L2.33 3.66l1.33-1.33 2.335 2.335z" fill="white"/></svg>') no-repeat 50% 50%;
background-size: 12px;

FF seems to be happy with the quotes around the data url and moving from #fff => "white" to fix the urlencoding issue. We can use color names for the others.

I'd be up for using ::after content with the unicode values if we can make that look decent.

[XhmikosR]

I'll experiment with the pseudo selectors solution for the symbols when I have some time.

…

On Jan 11, 2017 22:56, "Eric Bidelman" ***@***.***> wrote: Since we only have a few of these, introducing new tooling to urlencode seems overkill. I was able to get this working in FF: background: url('data:image/svg+xml;utf8,<svg width="12" height="12" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg"><title>poor</title><path d="M8.33 2.33l1.33 1.33-2.335 2.335L9.66 8.33 8.33 9.66 5.995 7.325 3.66 9.66 2.33 8.33l2.335-2.335L2.33 3.66l1.33-1.33 2.335 2.335z" fill="white"/></svg>') no-repeat 50% 50%; FF seems to be happy with the quotes are the data url and moving from `#fff` => "white" for the fill color fixes the urlencoding issue. We can use color names for the others. I'd be up for using `::after` `content` with the unicode values if we can make that look decent. — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#1124 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAVVtR9ouBRxwjD2L0u4JseBcmghuq3Qks5rRUHhgaJpZM4LIJSR> .

[wardpeet]

I can have a look as well if you like @XhmikosR but feel free to do so, it's not urgent :)

[XhmikosR]

@wardpeet: I made some progress in my branch but needs more work. See master...XhmikosR:viewer-ff-fixes

Do you want me to make a PR so that you can push too?