DOM changes losing styling

[BFalkner]

I'm using GSS inside an Ember.js app and when destroying and recreating elements they seem to position once then stop, or something. I really have no idea what is going on. :)

Here's my example: http://www.bfalkner.com/ Click on Blog, then on 'Brennan Falkner' to return to the first page. Notice that the main content renders without respect to the container size and doesn't update on resize. If I change the selectors to use classes instead of IDs, they render the full width of the container overlapping. Here is how they're styled:

@h |-(#index-main)~-~(#index-projects)-| in(main) gap([$pad]);
#index-main[width] == #index-projects[width] * 1.618;

#index-projects {
  width: <= 300;
}

Running some Javascript after the transition is an option.

[Inviz]

Hey. I think this is the case where double inequalities produce underconstrained system. Generally, you may not want to use ~-~ cushions (which produce >= constraints) together with width: <= 300.

Alternative to cushions would be to use explicit gap variable:

column-gap >= [$pad];
@h |-(#index-main)-[column-gap]-(#index-projects)-| in(main) gap([$pad]);

The difference is subtle indeed.

[BFalkner]

I see what you mean. The gap size is left ambiguous and as long as they maintain the ratio the constraints are satisfied.

Why is it that the values might change between initial render and removing/re-adding elements to produce the same dom tree?

[Inviz]

Because cassowary is iterative solver and it maintains state of computation. It maintains valid state of the system throughout the life of the solver instance. In underconstrained systems the valid solution is not necessarily what you desired.

It's possible to add more constraints to get more determenistic results

[BFalkner]

It seems to lose a constraint. If I remove/add the parent node (main) the constraint returns and another constraint is lost.

[Inviz]

You might be right here. Do you use the head version? (http://rawgit.com/gss/document/ranges2/dist/gss.document.parser.js)

I quickly poked your page. It could be identity issue, but I don't recognize gss version to make correct diagnosis

[Inviz]

Anyway, just wanted to say thank you for trying to figure out what's the problem. Sorry that you stumbled upon issues. I'd be happy to fix the issue if we can reduce the case to something testable.

[BFalkner]

2.0.0 from bower I'll let you know if using head changes anything in a little bit~

[BFalkner]

I updated the page with the JS version you linked to and its behavior didn't change. I deployed it as well. I can probably find time over the weekend to make a smaller demo.