Custom Elements and canvas/ctx functionality on iOS

[jonobr1]

I wrote an example test that creates a custom polymer-element that renders a simple grid based on attributes passed on the element. Unfortunately, when I use the CDN of polymer it doesn't seem to render anything on iOS. No errors either. Works fine in Safari and Chrome on OSX.

I tried using the impl property, because I found some success by querying the element directly, but still no luck. I tried searching if anyone else has run into this issue, but didn't find anything so figured I'd post a bug.

[sorvell]

Here's a quick thing to try:

move the code that you have in 's 'ready' method to the
'attached' method. This will ensure the canvas element (#stage) is in the
dom when you work with it.

I haven't verified if it'll address this issue, but I recall that we had a
similar issue attempting to draw to a canvas element not yet in dom on ios.

On Mon, Feb 17, 2014 at 3:42 PM, Jono Brandel [email protected]:

I wrote an example testhttps://dl.dropboxusercontent.com/u/1595444/experiments/polymer/canvas-ios.htmlthat creates a custom
polymer-element that renders a simple grid based on attributes passed on
the element's attributes. Unfortunately, when I use the CDN of polymer it
doesn't seem to render anything on iOS. No errors either. Works fine in
Safari and Chrome on OSX.

[image: screen-shot-2014-02-17-at-3 37 59-pm]https://f.cloud.github.com/assets/220033/2190587/ea289b34-982c-11e3-88f4-f76de595109e.png

I tried using the impl property, because I found some success by querying
the element directly, but still no luck. I tried searching if anyone else
has run into this issue, but didn't find anything so figured I'd post a bug.

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/422
.

[jonobr1]

Hey @sorvell! Thanks for the reply. Unfortunately attached event vs ready doesn't seem to alter anything...

[jonobr1]

FYI: both attached and ready look fine in Desktop Safari

[sorvell]

Creating a canvas element in a different document and transporting it to
the main document just doesn't work on ios. This is fixed on Safari so I
imagine they'll pick up the change in ios soon. Here's a basic example:

http://jsbin.com/gamujiba/4

The workaround I have is to manually create the in your custom
element's shadowRoot via document.createElement('canvas'); Something like
this at the top of your attached method:

var canvas = document.createElement('canvas');
this.shadowRoot.replaceChild(canvas, this.$.stage);
this.$.stage = canvas;

On Tue, Feb 18, 2014 at 10:51 AM, Jono Brandel [email protected]:

Everything looks fine in Desktop Safari

[image: screen shot 2014-02-18 at 10 50 55 am]https://f.cloud.github.com/assets/220033/2198846/b0790530-98cd-11e3-9f49-f109f99f9a28.png

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/422#issuecomment-35419003
.

[dfreedm]

@sorvell @jonobr1 I have to wonder if this is a "bug" or "feature" for ios safari.

[jonobr1]

And there it is! Thanks guys!