次のようなページがあります。
<html>
<body>
<div id="outer">
<div id="inner">
<img width="300" height="250" src="someimage.jpg"/>
</div>
</div>
</body>
</html>
CSS スタイルは次のとおりです。
*{
margin:0px;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-user-select: none;
-webkit-touch-callout: none;
}
body {
width:100%;
height:100%;
background:red;
overflow:hidden;
}
#outer {
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
display:-webkit-box;
-webkit-box-orient:horizontal;
-webkit-box-pack:center;
-webkit-box-align:center;
overflow:hidden;
border: 1px solid blue;
}
私は奇妙な振る舞いをたくさんしています:
- WebView で Web ページを最初に読み込むと、青い線しか表示されません。
inner
divに画像がないようです。 - 最初の更新で、WebView はゆっくりと 100% の高さまで拡大します。それはゆっくりと明らかになり
someimage.jpg
ます。outer
画面全体を占める必要があることにゆっくりと気付くので、これは divのアニメーションのようなものです。 - 以降のすべての更新では、展開アニメーションは発生しません。すべてがうまく見えます。
Web ページの最初の 2 つの読み込みで何が起こっているのでしょうか?
もう 1 つの奇妙な点は、その青い境界線がなければ、2 番目と 3 番目は起こらないということです。つまり、実際には Collapsed の青い境界線である青い線だけで立ち往生していdiv
ます。inner
divの内容を表示するために境界線が必要な理由がわかりません。
すべての読み込みに同じ WebView を使用していることに注意してください。つまり、単に呼び出しているだけWebView#loadUrl
です。