SVG image within an absolutely positioned div is different on Firefox than Chrome

Question

I have the following web page:

http://designsystem.foamfactory.io/current/components/preview/main.html

It's basically a set of text, along with a couple of SVG images. In order to get the effect that I want (the hex bolts should be overlaid in a specific position on the text), I use absolute positioning within a relatively positioned container.

The actual HTML code and CSS are fairly simple, and outlined in this codepen:

https://codepen.io/jwir3/pen/ZEzRKyz

The associated HTML is:

<div class="lockup">
        <img class="lockup-logo logo-medium" src="http://designsystem.foamfactory.io/current/dist/assets/logos/Logo.svg" />
        <div class="textmark textmark-medium">
            <div id="hex-bolt-f-top">
                <img src="http://designsystem.foamfactory.io/current/dist/assets/misc/Hex%20Bolt.svg" />
            </div>
            <div id="hex-bolt-f-bottom">
                <img src="http://designsystem.foamfactory.io/current/dist/assets/misc/Hex%20Bolt.svg" />
            </div>
            <div id="hex-bolt-y-middle">
                <img src="http://designsystem.foamfactory.io/current/dist/assets/misc/Hex%20Bolt.svg" />
            </div>
            <div id="hex-bolt-y-bottom">
                <img src="http://designsystem.foamfactory.io/current/dist/assets/misc/Hex%20Bolt.svg" />
            </div>
            <div class="textmark-text">Foamfactor<span class="last-letter">y</span></div>
        </div>
        <div class="empty"></div>
    </div>

and CSS:

    .lockup {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: start;
    justify-content: flex-start;
  }


  .lockup .empty {
    -ms-flex-positive: 4;
    flex-grow: 4;
  }


  .lockup-logo {
    display: inline;
  }


  .textmark {
    display: inline-block;
    box-sizing: border-box;
    position: relative;
    padding: 0;
    -ms-flex: 1 1 0px;
    flex: 1 1 0;
    margin-left: .2em;
  }


  .textmark .textmark-text {
    display: block;
    color: black !important;
    box-sizing: border-box;
    font-family: "Staatliches";
    line-height: 1.0;
    letter-spacing: -.04em;
  }


  .textmark.textmark-large {
    font-size: 200pt;
  }


  .textmark.textmark-large .textmark-text::first-letter,

  .textmark.textmark-large .textmark-text .last-letter {
    font-size: 300pt;
  }


  .textmark.textmark-large .textmark-text .last-letter {
    margin-left: -.04em;
  }


  .textmark.textmark-medium {
    font-size: 80pt;
  }


  .textmark.textmark-medium .textmark-text::first-letter,

  .textmark.textmark-medium .textmark-text .last-letter {
    font-size: 120pt;
  }


  .textmark.textmark-medium .textmark-text .last-letter {
    margin-left: -.04em;
  }


  .textmark.textmark-small {
    font-size: 40pt;
  }


  .textmark.textmark-small .textmark-text::first-letter,

  .textmark.textmark-small .textmark-text .last-letter {
    font-size: 60pt;
  }


  .textmark.textmark-small .textmark-text .last-letter {
    margin-left: -.04em;
  }


  .textmark.textmark-tiny {
    font-size: 24pt;
  }


  .textmark.textmark-tiny .textmark-text::first-letter,

  .textmark.textmark-tiny .textmark-text .last-letter {
    font-size: 36pt;
  }


  .textmark.textmark-tiny .textmark-text .last-letter {
    margin-left: -.04em;
  }


  .textmark #hex-bolt-f-top img,

  .textmark #hex-bolt-f-bottom img,

  .textmark #hex-bolt-y-bottom img,

  .textmark #hex-bolt-y-middle img {
    width: .08em;
  }


  .textmark #hex-bolt-f-top {
    position: absolute;
    top: -.6em;
    left: .1em;
  }


  .textmark #hex-bolt-f-bottom {
    position: absolute;
    bottom: .1em;
    left: .1em;
  }


  .textmark #hex-bolt-y-bottom {
    position: absolute;
    bottom: .1em;
    right: .2282em;
  }


  .textmark #hex-bolt-y-middle {
    position: absolute;
    top: -.1em;
    right: .2282em;
  }

In Chrome, this always looks how I would expect. In Firefox (I'm using Nightly, but I have tried it on the latest release as well), however, the hex bolts on the far right of the div (the "Y") are too far to the right. Even stranger, most of the time it looks fine in Firefox, too, but when I inspect it using dev tools, it changes the width of the box or something, and it gets screwed up until I shift-refresh (a simple refresh won't fix the issue).

I'm fairly certain that the problem lies with the fact that the outermost div for this entire text/logo combination is a flexible box. The reason I have it that way is to center it on the page. Perhaps there is another way to achieve the results I want without this?

More to the point, I'm unclear on why the behavior is different between the two browsers. Have I hit on an area where the specification isn't well defined?

Answer 1

this solves the issue but you need to correct the first letter

.textmark .textmark-text {
    display: inline;
}