iOS arka plan boyutunu bozuyor

Question

İçeriğinin uzunluğuna uyacak şekilde genişletilecek veya daralacağı birkaç işaretli görüntü oluşturmaya çalışıyorum. Bu, her tarayıcı için iPhone ve iPad gibi iOS'taki herhangi bir tarayıcı için bekler.

iPad'in nasıl göründüğünü (üst işaretli görüntü) ve nasıl olması gerektiğini (ve Windows'ta ve diğer tarayıcılarda) görmek için aşağıdaki resim bağlantısına bakın.

Bunun için bir düzeltme bilen herkes, ya da bunun neden yalnızca iOS için olduğunu açıklayan bir açıklama?

&:after { 
     content: ''; 
     position: absolute; 

     top: -5px; 
     left: -10px; 
     width: 100%; 
     height: 47px; 
     z-index: -1; 
     background-size: 100% 47px; 
     @include bg-retina('~img/layout/block-subtitle-light-blue', 'png', 158px, 47px); 
    } 

Answer 1

Sorunu çözdüm.

Bir retina ekranı olup olmadığını belirleyen bir medya sorgusuyla.

$retina: 'only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx)'; 

&:after { 
    content: ''; 
    position: absolute; 

    top: 5px; 
    left: 0; 
    width: 0; 
    height: 36px; 
    display: block; 
    opacity: 0; 
    z-index: -1; 
    transition: width ease .4s, opacity ease .4s; 
    background: url(~img/layout/menu-hover.png) 0 0/100% 36px repeat-x; 

    @media #{$retina} { 
     background-image: url(~img/layout/menu-hover@2x.png); 
    } 
    }