Unexpected behavior: position: relative on ancestor affects border-radius

[sdtsui]

Expected Behavior: jazzicons should function as isolated components, style of wrapper elements shouldn't affect behavior (for example, application of key styles like border-radius).

Current Behavior: (exploration was timeboxed to 30mins, didn't dig too deep into lib code)

• When an Identicon is rendered as a descendant of an element with position: relative, border radius does not work. Icons are square instead of rounded.
• Examining dev tools, border-radius appears to be getting overridden to 0 by css reset, but deleting our reset.(s)css does not have any effect.
• (Here's the weird part...) Rendering another Identicon as a sibling to the ancestor also somehow fixes the problem for both Identicons. See .gif:
  
• Starts by rendering two, rounded/'fixed'
• Comment out the sibling of relatively positioned ancestor...refresh.
• Border Radius no longer applies.

Status:
I was able to fix with this change, by isolating my use of position: relative to avoid touching the Identicon. Flagging in case it'll be useful for others using this lib. This linked commit also constitutes reproduction steps: check out the commit before it, and npm run dev -- the main icon should be square instead of rounded.

@FlySwatter - I should point out: this issue might have more to do with identicon/icon factory code then jazzicon, but I figured this was the best place to document. Let me know what you think. Thanks!

[danfinlay]

Awesome work!! I'd known there was some strange behavior regarding this, but hadn't pinned it down. A timebox was a good strategy, and I'm so happy you found a workaround, although the fundamental bug almost sounds like a browser rendering issue.