質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.35%
jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

1回答

838閲覧

IE6でモーダルメニューを開く際に画面が一瞬チラつく

tmyk1979

総合スコア145

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2021/09/30 21:58

編集2021/09/30 22:01

前提・実現したいこと

ウィンドウ幅280px、ウィンドウの高さはメニューが開いた時にメニューが見切れるくらいの高さ(スクロールバーが有効になる高さ)の時、メニューを開くためメニューボタン(三印のボタン)をクリックした際に画面がチラつくのを防ぎたい。

ここに質問の内容を詳しく書いてください。

まず言い訳なのですが、自分の古いPCでIE6を発掘したので、気まぐれで自分の趣味で作っているホームページをIE6でも見られるようにしようと思い、取り組んでいる事なので、「今時IE6かよ」という突っ込みをいただくとしたらごもっともです。

IE6でウィンドウ幅280ピクセルでウィンドウの高さはメニューが開いた時にメニューが見切れるくらいの高さ(メニューが開いた時にスクロールバーが有効になる高さ)の時、メニューを閉じた状態で少し画面をスクロールさせてメニューボタンを追従させ、そこからメニューボタンをクリックしてメニューを開こうとすると、一応モーダル表示にはなるのですが、メニューが開く過程で画面がチラつきます。
(280ピクセルよりも幅が広い状態についてはまだ半端にしか手を付けられていません。)

このメニューを開く際、画面が一瞬チラつくのを解消する手立てがあれば、ご教示いただけると幸いです。

今はひとまず他のブラウザを無視してIE6でだけ実現できれば良いと考えています。

■■な機能を実装中に以下のエラーメッセージが発生しました。

エラーは出ていません。

発生している問題・エラーメッセージ

モーダルメニューを開く際に画面が一瞬チラつく。

エラーメッセージ

エラーは出ません。

該当のソースコード

すいません、Jqueryだけで文字数オーバーしてしまうため文字数の関係でここに書けませんでした。
以下のURLに現状をアップしております。
これでお付き合いいただけると幸いです。

でもご無理はなさらないでください。そもそもIE6な時点でアレなので・・・。

http://cgi1.plala.or.jp/~tmyk1979/index.html
index.html・・・HTML
style.css・・・CSS
modal-menu.js・・・メニューボタンについてのJquery

試したこと

bodyの高さを切り替える記述を書く位置を変えてみたり、setTimeout()を使ってslideToggleやfadeToggleがきれいに表示されるようなタイミングを探ってみたり、$.when().done(function(){});を使ってbodyの高さが変わってからトグルを行うようにしたり、トグルを行ってからbodyの高さを変えてみたり、、、などやってみたのですが、うまく行きませんでした。

補足情報(FW/ツールのバージョンなど)

InternetExplorer6
SublimeText

ここにより詳細な情報を記載してください。

IE6でもmin-height、min-width、max-height、max-widthを実現するminmax.jsを使っています。
CSS3をIE6にも対応させるselectivizr.jsを使っています。
HTML5をIE6にも対応させるhtml5shiv.jsを使っています。
メディアクエリをIE6にも対応させるcss3-mediaqueries.jsを使っています。

なるべく削ったのですがHTML,CSS,JavaScriptともに長くてすみません。
以下のURLに現状をアップしてあります。

もしこの質問にお付き合いいただける方がいらっしゃいましたらIE6でご覧いただけると、質問内容が伝わりやすいかと思います。

http://cgi1.plala.or.jp/~tmyk1979/index.html
index.html・・・HTML
style.css・・・CSS
modal-menu.js・・・メニューボタンについてのJquery

よろしくお願いします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2021/09/30 22:26

>でもご無理はなさらないでください。そもそもIE6な時点でアレなので・・・。 もうIE自体捨てても誰も文句言わないと思います。
tmyk1979

2021/09/30 22:55

・・・ですよね、私もほんの気まぐれで作ってみたのですが、予想以上に難しかったです。
m.ts10806

2021/09/30 22:59

そこに割く労力をコンテンツやUI,UX向上に役立ててください。
m.ts10806

2021/09/30 22:59

対応のために読み込んでるjsやcssもリソースの無駄になります。
退会済みユーザー

退会済みユーザー

2021/09/30 23:08

「ie6の仕様です、修正できません」でつっぱねる
yambejp

2021/10/01 01:08

IE11のエミュレートモードではなく本当のIE6でしょうか? もしそうであればそんな古い筐体はネットワークにつないではいけません
guest

回答1

0

自己解決

解決には至っておりませんが、もともと気まぐれでやってみた事なので、皆様のご指摘をいただき諦めがつきました。

m.ts10806さんの言う通り労力はコンテンツ、UI、UXの向上に注いだ方が良いですし、Yambejpさんの言う通りIE6をネットにつなぐ事自体危険なので、これ以上は深追いしないようにします。

最近のブラウザではやりたい事ができているので、それで良しとします。

皆様、修正依頼でのご指摘ありがとうございました。

投稿2021/10/01 13:52

tmyk1979

総合スコア145

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問