[SOLVED] Path.Fill ignored in IE\Edge until after Resize

[TaterJuice]

OK, this is a really strange issue. In Microsoft Internet Explorer and Microsoft Edge the Path.Fill property is ignored on load. Only a resize causes the path to fill. I took a video of this behavior, in order to demostrate

YOUTUBE VIDEO LINK: https://www.youtube.com/upload_thumbnai ... 4885433814


Notice how the Path loads in IE and Edge without the Green Path.Fill property, but loads in Chrome and Simulator with the Green Fill.
As soon as you begin to resize the IE\Edge window, the Green Path.Fill appears.

Here is a copy of my sample project:
https://www.dropbox.com/s/o8k2j57wln0vu93/CSHTML5_ChromeEdge_Path_Diff.zip?dl=0

[JS-Support @Userware]

Thank you.

We are going to investigate this issue on IE/Edge. I will keep you updated.

Regards,
JS-Support

[TaterJuice]

This issue is still occurring 7 months after I reported it.
This has a huge impact on 80% of my users (those that use IE and Edge) - they cannot see icons and glyphs throughout our application.

I really, really need this fixed asap.


Is there an update? How long until we can expect a bugfix?

[JS-Support @Userware]

Hi,

Sorry for the very long delay. It is strange because it does not seem to happen on every app. The next build will include an attempt to fix this issue, though it is still not very clear for us what causes it. We will keep you updated asap.

Thanks.
Regards,
JS-Support

[JS-Support @Userware]

Hi,

We may have found a workaround for Edge: it is going to be available in the next build.

As far as IE is concerned: we are unable to reproduce the issue on IE. What version of IE have you tested it on?

Thanks
Regards,
JS-Support

[TaterJuice]

IE11 Version 11.98.16299.0 on Windows 10 x64

[TaterJuice]

I've noticed it has something to do with the Stroke Property.
See these notes:

With Stroke

Code: Select all

<Path
    Canvas.Left="0"
    Fill="WhiteSmoke"
    Stroke="Transparent"
    Data="M18.1,4.8C18,4.3 17.6,4 17.1,4H13L13.2,7H10.8L11,4H6.8C6.3,4 5.9,4.4 5.8,4.8L3.1,18.8C3,19.4 3.5,20 4.1,20H10L10.3,15H13.7L14,20H19.8C20.4,20 20.9,19.4 20.8,18.8L18.1,4.8M10.4,13L10.6,9H13.2L13.4,13H10.4Z" />

Chrome: Works as expected
Firefox: Works as expected
IE and Edge: Fill flashes on load, then disappears. On Resize Browser window, Fill loads color.

Without Stroke

Code: Select all

<Path
    Canvas.Left="0"
    Fill="WhiteSmoke"
    Data="M18.1,4.8C18,4.3 17.6,4 17.1,4H13L13.2,7H10.8L11,4H6.8C6.3,4 5.9,4.4 5.8,4.8L3.1,18.8C3,19.4 3.5,20 4.1,20H10L10.3,15H13.7L14,20H19.8C20.4,20 20.9,19.4 20.8,18.8L18.1,4.8M10.4,13L10.6,9H13.2L13.4,13H10.4Z" />

Chrome: Works as expected
Firefox: Works as expected
IE and Edge: Fill loads color. On Resize Browser window, Fill DISAPPEARS!

[JS-Support @Userware]

Hi,

The issue on IE and Edge has been fixed in v1.1.2.

Thanks.
Regards,
JS-Support