Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Dart compiled to JS using a polymer element not working in Safari, seems perfectly ok in Chrome/FF #18867

Closed
DartBot opened this issue May 16, 2014 · 19 comments
Labels
area-pkg closed-obsolete Closed as the reported issue is no longer relevant

Comments

@DartBot
Copy link

DartBot commented May 16, 2014

This issue was originally filed by magusof...@gmail.com


So I have been experiencing problems with some dart2js generated code not working in Safari. This is on 7.0.3 on OS X Mavericks.
The problem(s) are as described here: http://stackoverflow.com/questions/23703246/uncaught-error-illegal-arguments-running-dart-compiled-to-js-in-safari.

@dgrove
Copy link
Contributor

dgrove commented May 17, 2014

Added Area-Dart2JS, Triaged labels.

@DartBot
Copy link
Author

DartBot commented May 18, 2014

This comment was originally written by magusofice...@gmail.com


This probably goes without saying but, if you need any more info ask away and I will try to answer as best as I can.

@floitschG
Copy link
Contributor

Set owner to @karlklose.

@karlklose
Copy link
Contributor

Could you provide the generated code that the stacktrace in your stackoverflow questions refers to?

@DartBot
Copy link
Author

DartBot commented May 19, 2014

This comment was originally written by magus...@gmail.com


Here it is, home.dart.js


Attachment:
home.dart.js (5.62 MB)

@floitschG
Copy link
Contributor

ccing Pete and John, since this will most likely be unrelated to dart2js.


cc @blois.
cc @jmesserly.

@floitschG
Copy link
Contributor

Copying over bug description. This allows us to have all the information in one place and makes it easier to search for it.

So there is Dart code I am dealing with which uses polymer, and perhaps another relevant detail is that there are a lot of Futures in it. When accessing the web page (you can see it here yourself: http://trommons.org/) loads fine in Chrome and Firefox, new versions at the least, but in Safari latest version the "Task stream" dart component (content directly under the "Translation tasks" header) doesn't work and hence displays the configured text "Loading..." while not actually doing anything.

This is work-related pretty much, for my internship as part of my undergrad degree, but thankfully due to the nature of the project this is open source so I am free to share code.

The TaskStream dart source and html (for polymer element and such) can be seen on our Github repo here.

So, the following is the Stack trace I get in Safari console when the project is built with dart2js in debug mode (did this on a "dev server" we have at work for site testing, it is not built in debug mode on the live site I linked):

Illegal argument(s) zone.dart:711
(anonymous function) zone.dart:711
callback$0 home.dart.js:13983
(anonymous function) schedule_microtask.dart:23
(anonymous function) schedule_microtask.dart:32
(anonymous function) isolate helper.dart:1510
(anonymous function) js_helper.dart:1820
(anonymous function) isolate_helper.dart:355
(anonymous function) isolate_helper.dart:30
(anonymous function) js_helper.dart:1820
(anonymous function) js_helper.dart:1842

@floitschG
Copy link
Contributor

@magusofice: if it isn't too hard, could you host a non-minified version somewhere?

@DartBot
Copy link
Author

DartBot commented May 20, 2014

This comment was originally written by magus...@gmail.com


Sorry, to clarify how do I do get non-minified version? is there an option when running pub build? All I knew of was mode =debug/release.

@floitschG
Copy link
Contributor

debug would be fine. In fact the attached home.dart.js from comment #­5 would be great.
If you have it hosted somewhere (with the html) I could ask someone with a safari browser to take a look and see if he recognizes the issue, without him needing to install a local copy.

@DartBot
Copy link
Author

DartBot commented May 20, 2014

This comment was originally written by magusof...@gmail.com


Oh so that version is fine, that's cool. But when you say host it somewhere do you mean so that it could actually run there or just have the files?

@DartBot
Copy link
Author

DartBot commented May 20, 2014

This comment was originally written by maguso...@gmail.com


If you mean have it run where I would host it I am not so sure I can easily do that..although perhaps I could share our "dev server"'s public address though just to be on the safe side I don't think I should post that on a public issue page like this. I guess I could email the address to one of you guys or something like that?

@floitschG
Copy link
Contributor

That falls into the "too hard" category. Don't worry. We will have a look at what is already there.

@DartBot
Copy link
Author

DartBot commented May 20, 2014

This comment was originally written by maguso...@gmail.com


Well, I mean, if I just give you the address you will be able to see a version of the site running with the "debug mode" .dart.js for the dart component.

@jmesserly
Copy link

Hey, one thing I notice is the page is using shadow_dom.debug.js and custom_element.js, so I'm guessing that you are also using polymer or angular? If so do you know what version (pubspec.lock should list it)?

One possible fix, you may want to try replacing those with platform.js in: http://pub.dartlang.org/packages/web_components

The reason is that it has some bug fixes compared to the older shadow_dom pkg. I'm not sure if it will help for this particular case (the older shadow_dom was decently good) but we've had some reports of web_components/platform.js fixing problems.

I traced it through and what seems to be happening is the very first call from jQuery into ShadowDOM has an unwrapped node in Safari, but a wrapped node in the others. The failure is in Node.appendChild, assertIsNodeWrapper. I'm not able to debug through minified jQuery to see where that particular node is coming from. But it may be a matter of ensuring jQuery only passes in the wrapped node.

The most common cause of unwrapped nodes is direct traversal from "document" using only properties/indexers, e.g. document.body or document.body.childNodes[2]. Those APIs cannot be patched and won't work with Shadow DOM Polyfill. Using document.querySelector('body') or calling any other method on the node will work though.

Nodes can be manually wrapped in JS using ShadowDOMPolyfill.wrap or .wrapIfNeeded. These APIs can be used in Dart via JS interop.


Added NeedsInfo label.

@jmesserly
Copy link

btw, Shadow DOM comes form https://github.com/Polymer/ShadowDOM, that is a good place to search for issues or file ones relating to Shadow DOM. (And based on the stack trace, it looks like an SD issue)

@jmesserly
Copy link

Removed Area-Dart2JS label.
Added Pkg-ShadowDOM, Area-Pkg labels.

@jmesserly
Copy link

p.s. your site looks really cool :)


Removed the owner.

@DartBot
Copy link
Author

DartBot commented May 20, 2014

This comment was originally written by magusofice...@gmail.com


(Re: I'm you are using polymer...) Yes, we have polymer elements.

Pubspec.lock here :https://github.com/TheRosettaFoundation/SOLAS-Match/blob/develop/ui/dart/pubspec.lock

So polymer package version is 0.9.5+2.

Hopefully when I get into work in the morning I will get a chance to look into using those new JS files you mentioned.
So, if I am to try to replace the current ones with those is it just a matter of changing my pubspec.yaml and then making sure I include the new JS files in the HTML?

@DartBot DartBot added Type-Defect area-pkg closed-obsolete Closed as the reported issue is no longer relevant labels May 20, 2014
This issue was closed.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
area-pkg closed-obsolete Closed as the reported issue is no longer relevant
Projects
None yet
Development

No branches or pull requests

5 participants