channingallen/tower-defense

Absolutely-positioned children break justify-content in Firefox

Closed this issue · 1 comments

Recent changes to the flexbox spec exclude absolutely-positioned elements from the flex layout, but a prior version required them to be handled with a zero-size placeholder.

Each tower group has an absolutely-positioned child to make the pulse effect work. Unfortunately, since Firefox still hasn't implemented the latest flexbox spec, this breaks the spacing for justify-content: space-between and space-around. Since those are critical in the first few levels, the game is pretty much unusable in Firefox.

A simple fix would be to make a new wrapper for the tower group that contains two children: the absolutely-positioned background element and the display: flex container that the towers will go in (the one the user styles).

I believe this workaround would be made in /app/components/td-game/board/tower-group/template.hbs. I'd make a pull request, but not having done much Ember dev myself I'm not sure the cleanest way to add the wrapper element.

Fixed this here: a4cdd87

Thanks for the heads up.