Skip to main content
L
Lucy5by5
Known Participant
January 31, 2018
Question

Interactive Canvas Compatability Issues with Safari & Chrome

  • January 31, 2018
  • 2 replies
  • 1415 views

Are there compatibility issues with Canvas animations (that have interactivity, like button links) working in Safari or Chrome?

At first, I thought it might have been that I'd somehow stomped on essential code after I imported the generated HTML, a sprite .png file, and .js files into my Dreamweaver site and began manipulating the code around them.

However, I just published the Animate project as is to a folder on my desktop, then attempted to open the file into both Chrome and Safari, and neither work. However it works fine in Firefox.

What gives?

I'm running:

Apple Safari Version 11.0.2 (12604.4.7.1.6)

Google Chrome Version 63.0.3239.132 (Official Build) (64-bit)

Mozilla Firefox Version 57.0.4 (64-bit)

The .fla is just a bunch of buttons with closely-aligned, odd shapes that aren't possible to create any other way (that I can see). No insane animations here, this should be easily handled.

BTW, the responsive HTML5 page I'm ultimately putting this into, is also otherwise VERY simple.

The generated Canvas element also functions fully in Live Preview within Dreamweaver, with button links and hover states working fine too.

From what I understand, OAM files (output from Animate as an alternative to Canvas) are being deprecated, so that doesn't seem a solution (I've never used those anyhow), and I need this to function for longer than five minutes before some goober changes the WC3 standards yet again. (Please correct me if I'm wrong about this.)

This topic has been closed for replies.

2 replies

T
terryj41605550
Known Participant
November 5, 2020

I am having a similar problem only not with buttons. The images are all messed up in chrome but work fine in Firefox. The wrong images load when viewing the page. The file test fine, but the published file doesn't display properly in a chrome. But works fine in Fierfox.

L
Lucy5by5Author
Known Participant
February 14, 2018

Per the Dreamweaver forums, the hitregion api is not supported in the Safari, Edge, or Chrome browsers (hidden behind a flag), and they theorize that this is why you can't create the interactive buttons that Adobe CLAIMS you can, in a canvas document.

I still need to know if there's a workaround for this, otherwise weeks of work will be useless.

If not, then Adobe needs to stop stating in it's documentation that making interactive buttons inside a canvas element is a possibility. At a minimum, that information should come with HEAVY caveats that MOST browsers don't support interactivity generated by Animate CC.

I would appreciate SOMEONE actually responding from Adobe on this.

C
ClayUUID
Legend
February 14, 2018

Lucy5by5  wrote

If not, then Adobe needs to stop stating in it's documentation that making interactive buttons inside a canvas element is a possibility. At a minimum, that information should come with HEAVY caveats that MOST browsers don't support interactivity generated by Animate CC.

Your assertion IS completely ridiculous. Buttons in Animate HTML5 Canvas documents work perfectly well in all modern browsers. The CreateJS guys wouldn't very well have come up with a button implementation that didn't work in most browsers. The entire point of it is that it's a cross-browser canvas animation library. It doesn't even use the hitRegion API.

As for the original poster's issue, I can't speak for Safari, but Chrome has known security sandbox issues with running certain content locally. In fact Animate even warns you of this every time you publish: "Content with both Bitmaps and Buttons may generate local security errors in some browsers if run from the local file system." That's why testing from within Animate runs the page through a local http server.

L
Lucy5by5Author
Known Participant
February 19, 2018

Well sorry, but I’m just telling you what I’m seeing. Just scoffing and calling it “ridiculous” isn’t exactly helpful.

All the rollovers and links work find in Firefox, but not in Safari, Chrome, or Edge. All the code was generated by Animate. I made no changes to it, I simply output it via Publish.

I used pre-canned code snippets, ex:

this.PageName.addEventListener("click", fl_ClickToGoToWebPage_1);

function fl_ClickToGoToWebPage_1() {

  window.open(“PageName.html", "_self");

}

That’s it, man.

As for the hitRegion API, I’m simply relaying what was theorized as the potential problem from the Dreamweaver forum guys, because there’s nothing else in my code that could be stomping on it, since even the raw pages generated directly from Animate, don’t work in most browsers.

If you or anyone else has a real solution, I'd love to hear it though.

Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices