1362236490 iPod touch 4世代、iOS 6.1.2です。今回はSafariのことについての質問です。

タップするごとに色が変わっていく(赤→緑→青→赤→緑…)スクリプトを作りました。

色が変わっていくのは良いのですが、何故か左下と右下の部分が赤くなっています。
なお、PCのChromeで確認したところ、このようなことは起きませんでした。
これを修正することはできますか?

(html、スクリプトは補足に書きます。)

回答の条件
  • 1人5回まで
  • 登録:
  • 終了:2013/03/07 18:21:58
id:hiroto300
<!DOCTYPE html>
<html>
<head>
<style>
html, body, #space_1 {
  height: 100%;
}
</style>
<script>
function Initialization() {
  document.body.style.backgroundColor = "#ff0000";
  a = "red";
}
function func_1() {
  switch (a) {
    case "red":
      document.body.style.backgroundColor = "#00ff00";
      a = "green";
      break;
    case "green":
      document.body.style.backgroundColor = "#0000ff";
      a = "blue";
      break;
    case "blue":
      document.body.style.backgroundColor = "#ff0000";
      a = "red";
      break;
  }
}
</script>
</head>
<body onload="Initialization();" style="">
<div id="space_1" onclick="func_1();">
</div>
</body>
</html>

(一部省略してあります)

また、画像からデータURIスキームを使用したということが分かりますが、これが何かに影響するのであれば、教えていただけると嬉しいです。

ベストアンサー

id:fiwa No.1

回答回数1200ベストアンサー獲得回数253

手許に全く同じ環境があったので、試してみました。
しかしどういうわけか、表示が質問者さんのものと違っていました。確かに同じように赤い点ができるのですが、その大きさが違っています。URIスキームの場合と、DropboxのPublicフォルダにhtmlファイルを置いた場合で試してみたのですが、表示は同じでした。

URIスキームの場合
http://f.hatena.ne.jp/fiwa/20130303194611
Dropboxに置いた場合
http://f.hatena.ne.jp/fiwa/20130303194612

それから、styleタグにあるheightの値を変えると赤い部分の長さが変わります。
height: 110%; にすると赤い部分が縦に長くなり、height: 99%; にすると赤い点は見えなくなりました(あくまで、私のものの場合)。
どういうことかはよく分からないのですが、iOS上でのstyleの解釈の問題のような気がするので、いろいろ試してみてはいかがでしょう。

他1件のコメントを見る
id:fiwa

ちゃんと赤い部分が同じくらいの大きさになりました。
http://f.hatena.ne.jp/fiwa/20130303200508

styleを height: 99%; にしてみましたが、やっぱり赤い点は見えなくなってますね。

2013/03/03 20:07:20
id:hiroto300

metaタグを入れた場合も確認していただき、ありがたいです。

これはSafariのバグと考えてよさそうな気がします。
height: 99%の場合、赤い点が出なくなるというのも参考になります。

今回はありがとうございました。また機会があればご回答よろしくお願いします。

2013/03/03 20:16:07

その他の回答0件)

id:fiwa No.1

回答回数1200ベストアンサー獲得回数253ここでベストアンサー

手許に全く同じ環境があったので、試してみました。
しかしどういうわけか、表示が質問者さんのものと違っていました。確かに同じように赤い点ができるのですが、その大きさが違っています。URIスキームの場合と、DropboxのPublicフォルダにhtmlファイルを置いた場合で試してみたのですが、表示は同じでした。

URIスキームの場合
http://f.hatena.ne.jp/fiwa/20130303194611
Dropboxに置いた場合
http://f.hatena.ne.jp/fiwa/20130303194612

それから、styleタグにあるheightの値を変えると赤い部分の長さが変わります。
height: 110%; にすると赤い部分が縦に長くなり、height: 99%; にすると赤い点は見えなくなりました(あくまで、私のものの場合)。
どういうことかはよく分からないのですが、iOS上でのstyleの解釈の問題のような気がするので、いろいろ試してみてはいかがでしょう。

他1件のコメントを見る
id:fiwa

ちゃんと赤い部分が同じくらいの大きさになりました。
http://f.hatena.ne.jp/fiwa/20130303200508

styleを height: 99%; にしてみましたが、やっぱり赤い点は見えなくなってますね。

2013/03/03 20:07:20
id:hiroto300

metaタグを入れた場合も確認していただき、ありがたいです。

これはSafariのバグと考えてよさそうな気がします。
height: 99%の場合、赤い点が出なくなるというのも参考になります。

今回はありがとうございました。また機会があればご回答よろしくお願いします。

2013/03/03 20:16:07

コメントはまだありません

この質問への反応(ブックマークコメント)

トラックバック

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

回答リクエストを送信したユーザーはいません