1433632 - Live demos of animated canvas don't work with safari

Status: RESOLVED WONTFIX

(Developer Documentation Graveyard :: API: Miscellaneous, enhancement, P3)

Description

[Christophe Meessen]

What did you do?
================
Display web page for animated canvas. The live demo rectangle is all whitelive demo box  rema8ns white. 

Same problem for the page showing how to display images in a canvas. The live demo remains a white rectangle. 

I have iOS 

What happened?
==============
I expect it should show the live demo

What should have happened?
==========================
The form to freport this bug is broken. 
I start filling it. Then I changed app to check iOS version. When I switched back to safari and this firm. The carret insertin bar was not displayed in filling fields htext) and not text was shown in fields. So I'm writing this blind.

Is there anything else we should know?
======================================

Comment 1

[Christophe Meessen]

What did you do?
================
Display web page for animated canvas. The live demo rectangle is all white.

Same problem for the page showing how to display images in a canvas. The live demo remains a white rectangle. 

I have iOS 11.2.2. Accessing page with iPad. 

What happened?
==============

Live demo rectangles remain white on all pages. 

What should have happened?
==========================

I expect it should show the live demo.

Is there anything else we should know?
======================================

The form to freport this bug is broken. 
I start filling it. Then I changed app to check iOS version. When I switched back to safari and this firm. The carret insertion bar was not displayed in the text field I was initially editing.  Clicking in a field didn't relocate the insertion carret. Double clicking on a word, showed a selection in some apparently random location of the screen. 

Looks like Safari is completely broken or there is a problem with your form.

Comment 2

[John Whitlock [:jwhitlock]]

I’m sorry you are having problems with the demo. Do you know the URL of the demo?

On this page, “A Simple Example”, I see a blue and red rectangle that create a purple rectangle where they overlap. I’m using Safari on iOS 11.2.5.

https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Basic_usage

I’m having a difficult time reproducing your issue with the Bugzilla form as well. If you continue to see this issue, please open a new bug against the Bugzilla component, so that the Bugzilla team can triage and fix it.

Comment 3

[Christophe Meessen]

Hi John. Thanks for the quick reaction. 

Checking with your URL displaying the english version, I see that the animation work. 
This works for me with safari https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Basic_animations

It's on the French pages that the animations don't work. 
https://developer.mozilla.org/fr/docs/Tutoriel_canvas/Animations_basiques

Do you see what could be different ?

Do you think it could be possible to extend the last example in the advance animation tutorial to accept also dragging with a finger for finger pointing devices ? Apparently we can select and drag the blue circle with the finger. Unless I'm doing it wrong. 

These tutorials are excellent. Thank you very much for this great work.

Comment 4

[Christophe Meessen]

Sorty, I ment we "can't" select and drag the blue circle with the finger.

Comment 5

[John Whitlock [:jwhitlock]]

The French page also does not work for me, on a desktop browser or iPad. The French page is a translation, and the English page works for me:

https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Basic_animations

The live samples are embedded with KumaScript:

{{EmbedLiveSample("An_animated_solar_system", "310", "310", "https://mdn.mozillademos.org/files/202/Canvas_animation1.png")}}

The first term, "An_animated_solar_system", is the ID of the section that contains the sample code. On the French page, the section has been translated and the ID changed as well. The new call should be:

{{EmbedLiveSample("Un_système_terrestre_animé", "310", "310", "https://mdn.mozillademos.org/files/202/Canvas_animation1.png")}}

I believe that after this change is made, the French page will work as well as the English. I'm not comfortable translating French documents, so I'm not comfortable making this change.

I think updating the examples to add touch events would be out of scope for this bug - we try to limit bugs to single issues that we can close when fixed, rather than an ongoing dialog that lingers for weeks and months. Ideas can be discussed on https://discourse.mozilla.org/c/mdn, and the successful ones are usually the ones implemented by those making the suggestions. MDN is a wiki, so it is appropriate to try out ideas by writing pages. I try experiments in the "User:" namespace, like: 

https://developer.mozilla.org/en-US/docs/user:jwhitlock/background

Comment 6

[BMO Automation]

MDN Web Docs' bug reporting has now moved to GitHub. From now on, please file content bugs at https://github.com/mdn/sprints/issues/ and platform bugs at https://github.com/mdn/kuma/issues/.