Strange popover behavior in blueprintjs on safari

Question

When using blueprintjs to display a menu using Popover I get some very, very strange results that only occur in Safari. (See the images.) The nice image shows what the menu looks like in Chrome or Firefox. The ugly image shows what it always looks like in Safari, on any Mac or on an iPad. I'm using bp4 and it happens with both Popover and Popover2.

Poking around in the element inspector in Safari doesn't reveal anything very illuminating. But in many cases if I change a style attribute (which one doesn't matter) the problem goes away.

Here's a tiny bit of the jsx code. I know this won't tell you much but I can provide more if that would be helpful. Mostly, I'm hoping for any insight at all about what might be going on.

<Popover2 minimal={true}
          content={the_menu}
          transitionDuration={150}
          position={this.props.position}>
            <AltButton/>
</Popover2>

Answer 1

Okay, I figured out the culprit. I had a style set that ended up attaching

svg {
  width: 90%;
  height:90%
}

To the icons that were displayed in the menu items. This caused all of the icons to be displayed at giant size - but only in Safari. The strange image is the result of many icons being displayed extra large.