これはマグカップのプレビューの画像です:
プレビューには、他の div に含まれるものが表示されますが、0.2 ずつ縮小されます。マグカップの表面曲線をシミュレートするために、プレビュー ブロックの幅 = 元の幅 * 0.2 で、0.6、0.8、1、0.8 のscaleX変換によってスケーリングされる手法を使用しました。0.6。
それは正常に動作します（クロスブラウザの互換性のためにhtml5キャンバスを使用できません。これは要件です）が、添付の画像（上の画像はchromeから、下の画像はSafariから）でわかるように、Safariは不要な光線をレンダリングします。何も役に立ちません-絶対的な配置、あるブロックを別のブロックに配置してその光線を非表示にします。これはサファリ固有の問題で、おそらくtransformXブロックの棚がアンチエイリアスされた後scaleX、サイドの棚がより明るくなったためです。他のブラウザはそうしません。
サファリでこれらの行なしでレンダリングするようにこれを修正する方法を知っている人はいますか?