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

[rdickert]

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]

@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]

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

[n1mmy]

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]

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 [email protected]:

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/IE9-only: context not set correctly in event triggered in nested template helpers #458#issuecomment-11078443.

[glasser]

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 [email protected] 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 [email protected]:

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/IE9-only: context not set correctly in event triggered in nested template helpers #458#issuecomment-11078443.

[n1mmy]

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]

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]

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

[rdickert]

Awesome. Thanks!