Span's style doesn't align horizontal on Android Phone

Question

I've worked on a website http://ineland.se and when my client views it on her phone (Samsung Galaxy S6) she gets this issue with the mobile-nav button (three horizontal bars):

Now the weird thing is that I can't find this issue replicated anywhere else. I do not have access to an Samsung Galaxy S6 (I'm just a small business developer) and when I use http://browserling.com to check the issue, it looks normal.

Here's the HTML for the icon:

<span id="header-burger" class="burger-nav btn">
        <span class="burger-nav-symbol open-burger">
            <span class="dash">&mdash;</span>
            <span class="dash to-cross">
                    <span class="plain">&mdash;</span>
                    <span class="cross x1">&mdash;</span>
                    <span class="cross x2">&mdash;</span>
            </span>
            <span class="dash">&mdash;</span>
        </span>
    </span>

Css (sass) for the symbol:

.burger-nav-symbol {
            position: relative;
            width: auto;
            height: auto;
            padding: 2px;
            display: inline-block;
            margin: 0 auto;
            * {
                clear: both;
            }

            .dash {
                display: block;
                float: left;
                color: $dark_A;
                overflow: visible;
                @include transition ($trans_all, $trans_time, $transease, $trans_delay);

                &.to-cross {
                    position: relative;
                    z-index: 14000;

                    .cross {
                        position: absolute;
                        top: 0;
                        left: 0;
                        opacity: 1;
                        @include transition ($trans_all, $trans_time, $transease, $trans_delay);

                        &.x1 {
                        opacity: 0;
                            }
                        &.x2 {
                            opacity: 1;

                        }
                    }
                }
            }
        }

Answer 1

I tried debugging your website in chrome (by making the viewport smaller) and it looked like this

When I used the inspector mode i saw this code:

after I removed that weird square it looked fine.

This is not an answer, but maybe you should try to find out how to get rid of that square.