CSSを使用してUIWebViewの下端をフェードする

detailView内のUIWebViewの下部をフェードアウトしようとしています。それは最後の20〜40ピクセルの色褪せによく似ています。私は "ReadMoreFade"（link）のCSSTricksコードを使用しています。私の単純化されたバージョンは以下に貼り付けられます。CSSを使用してUIWebViewの下端をフェードする

私の問題は、私のUIWebViewでスクロールを開始すると、暗い領域がブロックのように残ることです。私はこれを示すスクリーンショットを添付しています。どんな提案やヒント？ありがとうございました。

スクリーンショット：このような状況のために http://i51.tinypic.com/2rmxsfp.png

<!DOCTYPE html> 
<html> 
<head> 
<title>Fade bottom</title> 
<style> 
    body{background:#FFF} 
    p { 
    color:#000; 
    margin:0 auto; 
    text-align:justify; 
    text-indent:30px; 
    width:600px; 
    } 

    #fadeBottom { 
    background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0, rgba(255,255,255,0)),color-stop(1, rgba(255,255,255,0.7))); 
    bottom:0; 
    height:50px; 
    left:0; 
    position:fixed; 
    width:100%; 
    } 
</style> 
</head> 
<body> 
<p>Some long text here. Lorem ipsum?</p> 
<div id="fadeBottom"></div> 
</body> 
</html>

出典

2011-01-25 ialphan

、私は透明のグラデーションと白のイメージを作成し、必要に応じてそののUIWebViewの上にオーバーレイしたいです。ブラウザの内容をデバッグしようとするよりもずっと速くなるでしょう...

出典

2011-01-25 16:43:16

私はそれを考えましたが、グラデーションを使用してCSS3でそれを行うことができるかどうかを知りたかったのです。 iPhoneではなくSafariでうまく動作します。 – ialphan

うん、誰が知っている。 Web開発はあまり良くありませんが、AppleがiPhone上でこの種のレンダリングを何度もオフにしても驚くことはありません。私はそれを試したことはありませんが、あなたがピンチでズームインするときにも問題を引き起こす可能性があります。 –

画像を使用する場合でも、CSS3グラディエントを使用する場合でも、私は恐れ入りますがposition:fixed doesn't work on iOSです。

出典

2011-01-25 16:59:56

あなたは正しいです。「CSS固定配置は、iPhoneやiPadのSafariで動作しますが、期待通りのものではありません」私はこの時点でこのコードを調べており、Mobile Safari：http://doctyper.com/stuff/iphone/fixed/でうまくいくようです。ありがとうございました。 – ialphan

CSSを使用してUIWebViewの下端をフェードする

答えて

関連する問題