Known Participant

Question

Interactive Canvas Navigation created in Animate, embedded in HTML5 page in Dreamweaver - functions properly in Firefox, but not Safari or Chrome

Forum|Forum|7 years ago
January 31, 2018
3 replies
2316 views

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

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 responsive HTML5 page is otherwise VERY simple.

Animate generates an HTML page containing the Script in the header, and body onload command, the div containing the animations, and a separate .js file. I've imported these into my Dreamweaver site.

I have not altered the Animate generated .js in any way, or any of the scripts

I'm not using a framework (outside of Flexbox for responsiveness), I'm coding from scratch, trying to build a SIMPLE responsive Holy Grail 3 column design, and all the page has on it is:

layout.css – basic sizing, etc

normalize.min.css – available online and intended to (as the name suggests) normalize positioning display across all browsers

createjs-2015.11.26.min.js

generatedpage.js

The #animation_container style that Animate generates when you output a Canvas file

Flexbox container

1st row div + 3 column divs inside – that includes top level Home nav link, secondary level Page link, and the Brand logo

2nd row div + 3 column divs – just a spacer to prevent overlapping

3rd row div + 3 column divs – I have the Canvas element parked inside the middle column The position of that element is controlled by an additional div class="shape_block", and corresponding css in the layout.css file of:

.shape_block {

position: relative;

min-height: 760px;

min-width: 760px;

}

4th row div + 3 column divs – another spacer to prevent overlapping

5th row div + 4 column divs – footer with text nav links in each column (This row lives inside a <div class="navbar-fixed-bottom"></div>)

That's it.

Safari – Canvas element shows up, but interactive buttons don't work (cannot see the hover state of the button, nor does the link to a new page work).

Chrome – Same error.

Firefox – Everything works fine.

IE – I don't use, because screw Micro$soft. I was done fighting with that one in 1999.

Edge – Don't trust it because Micro$soft. Same brand of stupid, different day.

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

From what I understand, OAM files (output from Animate as an alternative to Canvas) are being deprecated, so that doesn't seem a solution, as 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.)

Trying to determine if this is a browser problem that can be resolved with additional code, or if it's a code interaction problem somewhere between Flexbox, HTML5 .js, css, and Canvas, or what?

I've been fighting with this for a while, and can't pinpoint the problem beyond stupid browser issues – which considering that I'm using recent versions of all of them, seems like something Adobe developers would have accounted for.

Need an answer either from the forum or from Adobe Technical Support as my business is counting on this working. And gee, an actual phone number one can find on the website to call a human at some point, would be spiffy too.

Honestly, Flash worked better than all this BS. I really wish you guys had just sorted out the security issues with Apple and left that format intact, because Canvas seems a giant pain in the behind.

Instead of code getting cleaner and easier to use over time, it's just gotten frustratingly overthought where it shouldn't be, and underthought where more thinking should have occurred. Rant complete. Help will be appreciated.

This topic has been closed for replies.

Nancy OShea

Community Expert

At the risk of being brutally honest, I think using Animate CC (HTML5 Canvas) for page navigation is foolish.

Navigation is essential. It must work well on ALL devices. On the other hand, animation is nothing more than eye candy. It's a nice option for adding visual interest but it's certainly not essential.

Get a working menu on your page with HTML and CSS first. Then you can sweat the small stuff.

Nancy O'Shea— Product User & Community Expert

L

Lucy5by5Author

Known Participant

Well I'm a designer, so "mere" eye candy is kind of important. Literally the intent of the site. In this instance, design is cake, not frosting.

If you can suggest a better way to accomplish something creative that DOESN'T look like everyone else's site with boring navigation, I'd love to hear it.

Among designers though, we do actually miss the creativity of the early web. I'm so sick of designing into little boxes inside grids, I want to hurl. :-)

And of course I can just build a boring accordion nav or something on the site (I was going to do that anyways, because of standard nod to UX convention). But I wanted this graphical, unusual navigation option in the middle of the top level pages precisely because it is NOT those boring boxes. And I assure you, on Firefox, this looks awesome.

This was an attempt to do something... wait for it... NEW.

pziecina

Legend

Then Adobe needs to give me my money back for this app, if they're not going to support it, and it can't perform the actions it claims to in its User Guides. I mean really, don't pitch that artists can create interactivity in HTML5 canvas if it only works in 1 browser out of all the majors. The entire point of this application is to allow ARTISTS to create work, not just programmers. If you can't make it intuitive enough for artists, and then output generated code that fracking WORKS, then don't claim you can. So sick of this.

Lucy5by5 wrote
If you can't make it intuitive enough for artists, and then output generated code that fracking WORKS, then don't claim you can. So sick of this.

You are talking to none Adobe people in these forums, so complaints about products are not our problem.

Animate could work, but like all Adobe products intended for the web, experianced web developers are in a very small minority and are more often ignored than not. It should be possible to do what you wish in Animate, but if I or any web developer says how, we are ignored or shouted down by most Adobe dev teams, cab members and pre-release members.

pziecina

Legend

The reason the html5 canvas element does not have interactive content in Chrome, Safari and IE/Edge is that the hitregion api is not supported in those browsers, (hidden behind a flag) see the compatability table at -

https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/addHitRegion#Browser_compatibility

L

Lucy5by5Author

Known Participant

Do you know if there's a code workaround for that?

pziecina

Legend

Without seeing a live version of your page help is impossible.

For info though -

MS Edge is one of the better browsers for canvas support.

Like ALsp I am also wondering why you are using canvas for this, as css animations are a much better solution, unless of course there is some other reason?

It was not just the security problems with flash that caused browsers to decide to start blocking its use. It was also the fact that it was very heavy on mobile device battery life, the plug-in was excessively large, and that now it is possible to do everything flash was capable of using canvas, (not the code Animate produces though) and css animations.

It may be helpfull if you use the browsers, (safari, chrome) built-in javascript developers tools to monitor what is happening with those browsers, but without a live page no one else can do this for you. The most common problem with canvas is that the unnecessary, (in my opinion) extra js files that Animate uses, (create.js etc) are causing the problems. The reason i think this is that Dw uses an older version of the Chrome engine, (cef) for its live view, so it may be that both Chrome and Safari have compatability problems with the Animate js files.

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded