Border-top appears in half on iOS

Question

In the iOS the parameter border-top is shown up to half screen, on PC it appears with 100% width normally.

How to make it appear 100% width on iOS also?

This is the SCSS:

.wrapper-masthead {
border-top: 7px solid $amarelo;
background: $white;
width: 100%;
top: 0;
left: 0;
position: fixed;
z-index: 100;
  @include mobile {
    position: inherit;
  }
}

Complete code: https://github.com/sistematico/sistematico.github.io/blob/master/css/style.scss

Answer 1

Possible problems:

1 - Width of the widget

width: 100%;

This measure is relative to the next (highest hierarchy) element that has declared width. If the next element has 50px wide your child who is 100% wide will also have it.

.pai{
  width:50px;
}

.pai .filho{
    width:100%; /* 50px */
}

2 - Viewport

Include a viewport on your page (if you don’t have one) so you can more easily control the size of the elements and treat them with media-query accurately.

<meta name=viewport content="width=device-width, initial-scale=1, user-scalable=no">

3 - Position

@include mobile {
  position: inherit;
}

This section includes the position of the element with the highest hierarchy that has declared position. Avoid putting this way because there is more chance of some change in the layout change the position of this element unexpectedly. Perhaps the best use in this case was position Static which is the default position property:

@include mobile {
  position: static;
}