D3 bar chart svg fill issues in chrome

D3 bar chart svg fill issues in chrome
0

#1

the svg rectangle’s fill color doesn’t render in chrome (or safari)
hover also doesn’t work
everything renders properly in firefox (what i mainly used when testing)

if inspected, the svg rectangles are appropriately positioned but do not fill (or stroke) any color
therefore only the axes are displayed

the test suite passes completely in chrome and firefox

i have done a few google searches and noticed chrome and svgs don’t always mix well

here’s a pen

what i want to happen:
the svg rect (bars in the bar graph) display with the fill color

anyone have any ideas?


#2

the problem occurs because of these properties in my css:

* {
  width: auto;
  height: auto;
}

if * is changed to html or the properties are simply removed, this fixes the problem i was having.
some fine folk let me know the * in css is considered bad practice (for obvious reasons, in hindsight).