3

サイトの背景で非常に奇妙な問題が発生しています。複数の背景画像を使用しています。4 枚の写真と、画像の上に重ねてフレームを構成する角度の付いた形状の SVG があります。これは、ボディの背景の CSS です。

body {
    background-color: #bbe2de;
    background-image: url('/img/mobile-bg-exorcised.svg');
    background-position: top center;
    background-repeat: no-repeat;

    color: #2a2a2a;

    font-family: "ff-din-web";
    font-size: 16px;
    line-height: 1.4em;
}
@media screen and (min-width: 600px) {
    body {
        background: 
            url('/img/desktop-bg.svg') top left,
            url('/img/bg-photo-4.jpg') 849px 4460px,
            url('/img/bg-photo-3.jpg') 0 3948px,
            url('/img/bg-photo-2.jpg') 617px 980px,
            url('/img/bg-photo-1.jpg') 0 186px;
        background-repeat: no-repeat;
    }
}

すべてのデスクトップ ブラウザーで適切に表示されますが、iPad では SVG がまったく表示されません。残りの画像は正常に表示されます。サイトの他の場所で背景画像として SVG を使用していますが、問題なく表示されるため、MIME タイプのようなサーバーの問題ではないと思います。

ライブ サイトへのリンクは次のとおりです: http://johnkatimaris.thesmackpack.com/

具体的に何か問題があると思われる場合に備えて、問題の SVG ファイルを次に示します: http://d.pr/f/2vp4

なぜそれが機能しないのかについてのアイデアはありますか?

4

1 に答える 1

1

別のサイトで別の SVG ファイルを使用してこの問題に再び遭遇し、同じ問題が発生しました。iPadがSVGを表示する高さには、文書化されていない制限があるようです。それは本当に意味がありませんし、実際にはそうではないと思いますが、どちらの場合も画像を短くするとすぐに修正されるので、それしか思い浮かびません.

于 2013-11-25T15:51:10.893 に答える