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.