タップするごとに色が変わっていく(赤→緑→青→赤→緑…)スクリプトを作りました。
色が変わっていくのは良いのですが、何故か左下と右下の部分が赤くなっています。
なお、PCのChromeで確認したところ、このようなことは起きませんでした。
これを修正することはできますか?
(html、スクリプトは補足に書きます。)
<!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スキームを使用したということが分かりますが、これが何かに影響するのであれば、教えていただけると嬉しいです。
手許に全く同じ環境があったので、試してみました。
しかしどういうわけか、表示が質問者さんのものと違っていました。確かに同じように赤い点ができるのですが、その大きさが違っています。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の解釈の問題のような気がするので、いろいろ試してみてはいかがでしょう。
手許に全く同じ環境があったので、試してみました。
しかしどういうわけか、表示が質問者さんのものと違っていました。確かに同じように赤い点ができるのですが、その大きさが違っています。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の解釈の問題のような気がするので、いろいろ試してみてはいかがでしょう。
ちゃんと赤い部分が同じくらいの大きさになりました。
http://f.hatena.ne.jp/fiwa/20130303200508
styleを height: 99%; にしてみましたが、やっぱり赤い点は見えなくなってますね。
metaタグを入れた場合も確認していただき、ありがたいです。
これはSafariのバグと考えてよさそうな気がします。
height: 99%の場合、赤い点が出なくなるというのも参考になります。
今回はありがとうございました。また機会があればご回答よろしくお願いします。
ちゃんと赤い部分が同じくらいの大きさになりました。
2013/03/03 20:07:20http://f.hatena.ne.jp/fiwa/20130303200508
styleを height: 99%; にしてみましたが、やっぱり赤い点は見えなくなってますね。
metaタグを入れた場合も確認していただき、ありがたいです。
2013/03/03 20:16:07これはSafariのバグと考えてよさそうな気がします。
height: 99%の場合、赤い点が出なくなるというのも参考になります。
今回はありがとうございました。また機会があればご回答よろしくお願いします。