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.

Nancy OShea

Community Expert

If you care to post a link to your online site, we'll look at it and make suggestions. Navigation does not need to be boring. If you know how to work with CSS transforms and animations, you can do some amazing things.

Nancy

Nancy O'Shea— Product User & Community Expert

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

Also, does it profit me at all to code the canvas element entirely by hand (something which would be a huge hit to my project time wise) or is the ability to click on a button inside a canvas element simply not function in Chrome or Safari at all?

Because if that's the case, then canvas certainly no replacement for flash, where all that could be done VERY easily.

It means that canvas should be regarded solely as an animation tool, not an interactivity tool. I need something that does both, that is easy for an artist to use. That WAS flash. :-)

Can I unhide that flag, or input code that allows me to override that, and access the hitregion api?

pziecina

Legend

First, you may unhide the flag, but how do you tell your site visitors that they must enable experimental features, (not recommended)?

Now to your other questions, you can sort of make a 'canvas' button interactive by coding it by hand and using the dom, but quite honestly it is not worth the effort as at some point in the future the hitregion api will be implemented x-browser, and the only time it would be worth coding yourself would I think be when no other alternative exists.

It may even be that the create.js and other files that are currently used simply require updating, or rewriting to offer a 'workable' alternative to the missing hitregion api functions. The only problem I can think of with both the dom and update/rewrite possibilities are that they would probably rely on a co-ordonate system, making the canvas element a fixed size, so no rwd.

Both flash and the canvas suffer(ed) from a none web accessibility problem, which now severely limits/limited the use of them for business/corporate/government sites, as most countries now have accessibility laws for the web, (though even governments fail to fulfill them ).

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