HTML Canvas - Imported Illustrator problem in Firefox

Engaged ,
Apr 03, 2022 Apr 03, 2022

Copy link to clipboard

Copied

I have noticed an unusual problem with Firefox showing a layer in an imported Illustrator artwork as detached from the layers in front of it, that is, the Illustrator layers, which are all on the same Animate layer.  Only happens in Firefox, but not on all machines.  

 

In Chrome, no problems:

 

2022-04-04_10-49-36.jpg

This is what it looks like in Firefox:

 

2022-04-04_10-50-12.jpg

 

In Animate that eye graphic is on the one Animate layer.  The graphic is comprised of multiple layered graphics, all imported as a single layer object from Illustrator.

 

If I pull that graphic apart in Animate, the round iris that appears to pop to the top in Firefox, doesn't look like that.  Rather the iris is shaped at the top, not round.

 

2022-04-04_11-00-24.jpg

 

Any ideas?

Views

69

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Apr 04, 2022 Apr 04, 2022

Copy link to clipboard

Copied

Hi.

 

Adobe Illustrator artworks tend to be very complex, containing lots of features that are not supported either by Animate or the canvas.

 

So I always prepare the imported files trying to remove as much as I can things like the masks generated by the imported process, or change the blending modes back to normal or edit the gradients.

 

Not to say the that this preparation stage is very important for performance gains.

 

But if it's not practical to edit the imported arts, you can always consider converting them to bitmaps.

 

I hope this helps.

 

Regards,

JC

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Engaged ,
Apr 04, 2022 Apr 04, 2022

Copy link to clipboard

Copied

@JoãoCésar   Thanks JC

 

It's strange as I tested on another machine (Mac) with Firefox and no issue.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Engaged ,
Apr 11, 2022 Apr 11, 2022

Copy link to clipboard

Copied

@JoãoCésar   Your answer doesn't answer my question as to why the problem appears in Firefox and not in other browsers.  Converting to bitmap is not a solution for me.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Apr 11, 2022 Apr 11, 2022

Copy link to clipboard

Copied

LATEST

Hi.

 

The point is to simplify the imported artworks.

 

You have to remove all kind of features that may cause browser issues, like blending modes and some filters options.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines