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

IE9-only: context not set correctly in event triggered in nested template helpers #458

Closed
rdickert opened this Issue Nov 5, 2012 · 9 comments

Comments

Projects
None yet
4 participants
@rdickert
Contributor

rdickert commented Nov 5, 2012

Cross-browser tests of a prototype I'm working on showed me that one of my buttons doesn't work correctly in ie9 (running on win7). Oddly enough, ie7 and ie8 mode (set within ie9 dev tools) work. The error occurred in an event callback on a button inside an #each helper which was itself inside a #with helper. I discovered that the context this was not the same in the event handler in ie9 as it was for the other browsers (tested macos chrome + safari, win chrome & ff) .

I put together a gist that demonstrates the bug. On every browser I've tried except ie9, clicking the button logs "context: We are in the '#each' context" to the console, but in ie9, I get "context: undefined". If I switch ie9 to ie8 mode, it works. In my other code, the context actually stays as defined in the #with part of the template, so it's not identical to this behavior, but hopefully this is indicating the same problem.

@gschmidt

This comment has been minimized.

Member

gschmidt commented Dec 3, 2012

@rdickert, thanks for finding this bug -- I especially appreciate the reproduction you sent (though I haven't confirmed it yet.) We will set to work on fixing this.

@rdickert

This comment has been minimized.

Contributor

rdickert commented Dec 3, 2012

@gschmidt: Glad to help. Keep up the great work on Meteor. I really enjoy using it.

@n1mmy

This comment has been minimized.

Member

n1mmy commented Dec 6, 2012

This one is a doozy! Confirmed on the most recent devel. After a bunch of investigation, this appears to be a bug with text nodes in IE9. Text nodes can lose their expando attributes in some circumstances. The solution is probably to use the same workaround as IE8: add comments to the DOM instead of putting expando attributes on text nodes.

Some facts FTR:

  • this requires two nested blocks with data contexts. can be two #with, two #each or one of each.
  • It actually works correctly for the first 1-3 seconds! If you click the button right after page load, you get the right answer.
  • There is no re-rendering or other Spark action happening between when it works and when it doesn't
  • It works correctly if there is no whitespace between the two data blocks. That is {{#with foo}}{{#with bar}}<span class='foo'>Click</span>{{/with}}{{/with}} works fine, but adding a space between the two withs makes it fail.
  • The node structure stays the same between working and not working, but the liverange structure drops the inner 'data' liverange.
  • Other expando attributes placed on the text nodes are also lost.
  • Keeping a reference to all the nodes in the DOM fixes the problem.
@glasser

This comment has been minimized.

Member

glasser commented Dec 6, 2012

Presumably your observation about whitespace is because without the
whitespace, there's no text node?

Does changing canSetTextProps to true unconditionally in liverange.js fix
it?

On Thu, Dec 6, 2012 at 1:54 AM, Nick Martin notifications@github.comwrote:

This one is a doozy! Confirmed on the most recent devel. After a bunch of
investigation, this appears to be a bug with text nodes in IE9. Text nodes
can lose their expando attributes in some circumstances. The solution is
probably to use the same workaround as IE8: add comments to the DOM instead
of putting expando attributes on text nodes.

Some facts FTR:

  • this requires two nested blocks with data contexts. can be two #with,
    two #each or one of each.

  • It actually works correctly for the first 1-3 seconds! If you click
    the button right after page load, you get the right answer.

  • There is no re-rendering or other Spark action happening between
    when it works and when it doesn't

  • It works correctly if there is no whitespace between the two data
    blocks. That is {{#with foo}}{{#with bar}}Click{{/with}}{{/with}} works fine, but adding a
    space between the two withs makes it fail.

  • The node structure stays the same between working and not working,
    but the liverange structure drops the inner 'data' liverange.

  • Other expando attributes placed on the text nodes are also lost.

  • Keeping a reference to all the nodes in the DOM fixes the problem.


    Reply to this email directly or view it on GitHubhttps://github.com//issues/458#issuecomment-11078443.

@glasser

This comment has been minimized.

Member

glasser commented Dec 6, 2012

IE9 has a concept of document mode, where it can interpret a document in
IE9 mode or IE8 mode or ...
Maybe somehow it changes its mind on the fly?
Can you post the demo you were working on last night which actually does a
log when the behavior changes somewhere?

On Thu, Dec 6, 2012 at 8:40 AM, David Glasser glasser@meteor.com wrote:

Presumably your observation about whitespace is because without the
whitespace, there's no text node?

Does changing canSetTextProps to true unconditionally in liverange.js fix
it?

On Thu, Dec 6, 2012 at 1:54 AM, Nick Martin notifications@github.comwrote:

This one is a doozy! Confirmed on the most recent devel. After a bunch of
investigation, this appears to be a bug with text nodes in IE9. Text nodes
can lose their expando attributes in some circumstances. The solution is
probably to use the same workaround as IE8: add comments to the DOM instead
of putting expando attributes on text nodes.

Some facts FTR:

  • this requires two nested blocks with data contexts. can be two #with,
    two #each or one of each.

  • It actually works correctly for the first 1-3 seconds! If you click
    the button right after page load, you get the right answer.

  • There is no re-rendering or other Spark action happening between
    when it works and when it doesn't

  • It works correctly if there is no whitespace between the two data
    blocks. That is {{#with foo}}{{#with bar}}Click{{/with}}{{/with}} works fine, but adding a
    space between the two withs makes it fail.

  • The node structure stays the same between working and not working,
    but the liverange structure drops the inner 'data' liverange.

  • Other expando attributes placed on the text nodes are also lost.

  • Keeping a reference to all the nodes in the DOM fixes the problem.


    Reply to this email directly or view it on GitHubhttps://github.com//issues/458#issuecomment-11078443.

@n1mmy

This comment has been minimized.

Member

n1mmy commented Dec 7, 2012

https://gist.github.com/4230612

  • Removing the x and y makes it work
  • Uncommenting good.push(t) makes it work
  • changing canSetTextProps in liverange.js to false makes it work.
  • uncommenting the setInterval block at the end to see the liverange get dropped and measure the time it takes.

Pretty sure the answer is to detect IE9 somehow in canSetTextProps and return false instead of true.

Still need to test IE10.

@n1mmy

This comment has been minimized.

Member

n1mmy commented Dec 7, 2012

IE10 exhibits the same behavior, though it is a bit more random. Clicking the button rapidly right at page load seems to ward off the issue, and the timing is less precise.

@n1mmy n1mmy closed this in a13328b Dec 10, 2012

@n1mmy

This comment has been minimized.

Member

n1mmy commented Dec 10, 2012

@rdickert Should be all fixed now. Thanks for the report!

@rdickert

This comment has been minimized.

Contributor

rdickert commented Dec 10, 2012

Awesome. Thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment