Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

An html5 canvas animation runs fine in Chrome , but won't run in firefox v16 on my XP machine. Why?

  • 11 replies
  • 2 have this problem
  • 3 views
  • Last reply by fofcom

more options

Animation is created with Adobe Illustrator Canvas Export Plug-In Version 1.0 (PC) on my XP machine. It is from a tutorial I actually found from a search on the Mozilla Developer Network! It works fine on Chrome browser, but not in FireFox.

Here is link to tutorial http://visitmix.com/labs/ai2canvas/documentation.html#drawing

Animation is created with Adobe Illustrator Canvas Export Plug-In Version 1.0 (PC) on my XP machine. It is from a tutorial I actually found from a search on the Mozilla Developer Network! It works fine on Chrome browser, but not in FireFox. Here is link to tutorial http://visitmix.com/labs/ai2canvas/documentation.html#drawing

All Replies (11)

more options

That page is broken. There is a <base> tag that points to the C drive. Can you remove that?

more options

I am a novice user trying to become more proficient. When you say "remove the <base> tage that points to the C drive," I am sure I can find it, if it exists, and remove it, and that could solve the problem. Thank you very much! But why is this a key? What is happening? Why does it work in Chrome and not in Firefox?

more options

Note that the video tutorials only have an MP4 link and those do not work with Firefox (no video with supported format and MIME type found).

You will have to add Ogg video files for Firefox.

I can see them if I use View Video in the right-click context menu.

more options

A follow-up to my post above. I have reviewed the HTML script and found only the following references to local files. None in the html file reference <base>. Here is as close as it gets to a reference to a local drive.

<body onload="init()">
  <canvas id="canvas" width="800" height="532"></canvas>
  Image
  Path
  Linked File
  Linked File
  rocket
  Linked File
  Linked File
</body>

The associated JS script contains no <base> content, so far as I can tell. It's basic header info is below and seems only to enable clocks, independent of locations, but has no references to any local drive.

// Ai2CanvasAnimation.js Version 1.0 // Animation support for the Ai->Canvas Export Plug-In // By Mike Swanson (http://blogs.msdn.com/mswanson/) // and MIX Online (http://visitmix.com/)

// Create a shared standard clock var timeProvider = new standardClock();

// All animation clocks var clocks = new Array();

// Represents an animation clock function clock(duration, delay, direction, reverses, iterations, timingFunction, range, multiplier, offset) {

Hope this helps further clarify. Has anyone actually tried the implementation of this tutorial in Firefox?

Rod

more options

Thanks for your reference concerning playing video tutorials. I did not know this. However, this is not use of a video tutorial.

I downloaded the tutorial package from http://visitmix.com/labs/ai2canvas/documentation.html#drawing

I followed the tutorial, but, in addition, the tutorial contains an .ai file that has the completed file. I exported this using the .ai canvas exporter. Then, I loaded the resulting html into Dreamweaver 5.5.

Next, selected Firefox as brower for display, and it failed. Did same with chrome and it worked.

Assumption, then, is a problem with a) my set up or b) with Firefox. Has anyone else tried the demo? If so, with what result?

Thanks,

Rod

more options

A <base> tag is used to point relative URLs to a particular location. It is at the end of the <head> section of the page. It is causing a major error with NoScript, so I can't access your page directly.

more options

I'm not seeing such a <base> tag in the head section.

Can you post that part of the code as you see it?


 <!-- TYPEKIT -->
 <script type="text/javascript" src="http://use.typekit.com/dov1nin.js"></script>

 <script type="text/javascript">try{Typekit.load();}catch(e){}</script>
 <!-- END TYPEKIT -->
 
 <!-- START LIGHTBOX -->
 <script type="text/javascript" src="common/js/jquery-lightbox/js/jquery.js"></script>
 <script type="text/javascript" src="common/js/jquery-lightbox/js/jquery.lightbox-0.4.js"></script>
 
 <!-- START DOWNLEVEL JAVASCRIPT -->
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>

 </head>
more options

Sorry, I think it's my security software. It is blocking and redirecting various parts of the page.

more options

Still can't find a solution to the failure to display. I am adding a couple screen shots, one as it appears with Chrome the other with Firefox. It is the very same html from the tutorial package finished product in both cases.

more options

You could try posting on the mozillaZine Web Development board. That's a separate, unofficial forum.

more options

I was unaware of that. I'll give it a try. Thanks.