0

私はポートフォリオ ( http://www.chloémorillon.com/ ) の Web サイトに取り組んでいますが、すべての Web ブラウザーで確認したときに問題が発生しました。Chrome では問題なく動作しますが、Safari で確認すると、ブラウザは確実にクラッシュするまでページを更新し続けます。

私は SVG を使用してパラレパイプをレンダリングしているので、問題はそこから来ていると思います...

各形のボックスのコードは次のとおりです。

<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" height="485" width="305" class="svg-graphic">
         <filter id="grayscale">
              <feColorMatrix values="0" type="saturate"/>
         </filter>
         <g>
         <clipPath id="hex-mask">
         <polygon points="200, 0  200,284 0,384  0, 100"/>
         </clipPath>
         </g>
         <a xlink:href="http://xn--chlomorillon-eeb.com/projets/">
         <polygon transform="translate(2, 6)" points="200, 0  200,284 0,384  0, 100" stroke-width="10" stroke="#1a171b" fill="#1a171b"/>
         <polygon transform="translate(2, 6)" points="200, 0  200,284 0,384  0, 100" stroke-width="10" stroke="#75ffba" fill="#75ffba" id="bandw"/>
         <image preserveAspectRatio="xMidYMin slice" transform="translate(3, 6)" xlink:href="http://xn--chlomorillon-eeb.com/wp-content/themes/culotte/images/accueil1.jpg" width="100%" height="100%" clip-path="url(#hex-mask)" id="color"/>
        <image preserveAspectRatio="xMidYMin slice" transform="translate(3, 6)" xlink:href="http://xn--chlomorillon-eeb.com/wp-content/themes/culotte/images/accueil1.jpg" width="100%" height="100%" filter="url(#grayscale)" clip-path="url(#hex-mask)" id="bandw"/>
         </a>
     </svg>

私の問題について何か手がかりはありますか？

4

1 に答える 1

0

一般的なデバッグのヘルプ：問題が発生した場合は、問題のあるコードが見つかるまでコードを削除してみてください。Safari 5はSVGフィルターをサポートしていないため、フィルターを削除することから始めます。これによってクラッシュが発生することはありませんが（フィルターを無視するだけです）、わかりません。

もう1つの考えられる障害点は、utf-8ドメインです。http://xn--chlomorillon-eeb.com相対パスを試してください（ちょうど<a xlink:href="/projets">）。

クラッシュの原因となっているコードを特定したら、JavaScriptまたはSafari5のフォールバックを使用して回避策を考案できます。

于 2013-01-09T05:49:15.603 に答える