search

channingallen / tower-defense

Tower Defense with a twist: all towers must be positioned with CSS Flexbox.
http://flexboxdefense.com
600 stars 32 forks source link

Absolutely-positioned children break justify-content in Firefox #4

Closed couchand closed 8 years ago

couchand commented 8 years ago

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.

channingallen commented 8 years ago

Fixed this here: https://github.com/channingallen/tower-defense/commit/a4cdd87dad4fa15808e03138124c21b610418bac

Thanks for the heads up.