Welcome to my blog

vanillaice (Akira)

vanillaice (Akira)

ぬーん (´・ω・`)

以前にもチラっとお伝えしたことがあるのですが
Microsoft社製ブラウザの Internet Explorer と Microsoft Edge について
(ここでの「IE」はバージョン11を指します それ以下はスルーします)
そしてそのMicrosoft社最新OSであるところの Windows10 の絡みについて

もうホント... なんちゅーか (#=ω=)y-~~
今までもIEには散々苦しめられてきたわけですけれども
Windows10 のリリース IE斬りによるクロスブラウザ問題脱却 と....

いやいやいや!全然脱却できとらんからねこれ(笑)


固定背景 というのがありますよね
スクロールの影響を受けずに常に同じ位置から背景が動かない というアレです
逆にスクロール量に応じて背景が一緒に動くものを「繰り返し背景」と言います
背景がスクロールと共に動くとちょっと煩わしい面もありますので 最近は固定しているサイトさんが多いですね

全画面固定背景を表現するためのCSS 大別して2通りあります

① background-attachmentプロパティの fixed値 による固定
② positionプロパティ の fixed値 による固定

と ここで本記事の結論から言いますと
場合によってはIE及びMicrosoft Edgeのサポートを辞めようかと(笑)

Windows10ユーザーさんが現在どのぐらいかわかりませんが
Windows10 OSのIEそしてMicrosoft Edge 両ブラウザから閲覧するとですね
固定背景がスクロールのたびにビクビクブルブルと動いてしまうんです (´・ω・`)
これはもう閲覧に耐えうるレベルではありません

①のattachmentについてはなんとなく上手く動いてます
問題は②です
①の方は元々バグが多いプロパティでして
特にスマホでは全く使い物にならないんです
iOSは実装済みとなっていますが 実際には単なる繰り返し背景になってしまいますし
Androidの方は未実装?実装されたのか? ちょっとわかりませんが
いずれにしろiOSでダメなので使えない
それをhackするために②を利用するんですけどもねー...

CSSの内容と理論値としては正しいはずですが
Microsoft社製ブラウザだけがおかしい(笑)
んでもって Windows10以前のOSのIEも問題なし...
EdgeはWindows10以前にはバンドルされておりませんのでこの場合は無関係...
どうもWindows10 OS絡みのバグ(?) ... なんだろうなー やっぱ (´・ω・`)

国内で検索しても情報出てこないんですよね
ところが海外に絞ってみると やはり同じような要件が出てきます
IEやEdgeのfixedスクロールがおかしいやないかーい 的なやつね (´・ω・`)

色々やってはみましたが... お手上げ (o ̄▽ ̄o)
んで テンプレートの方なんですけどね
恐らくFC2運営陣のPCはWindows7, 8 あたりではないかと(笑)
だってもう明らかに定番テンプレシリーズなんかもスクロールがおかしいけれど
フツーに承認されてるもんなー...
ただあちらがWindows10にアップグレードしたときにどうか って話しですよね
Microsoft謹製ブラウザで背景がおかしい というのはリジェクトなんじゃないの たぶん(笑)

まあ 一応申請は致しますけれども
リジェクト食らったらさっさとブログ限定に切り替えます
その際には「Microsoftブラウザのサポートは無理 (∩・∀・∩)」という形にせざるをえまい
すみませんです ^^;

背景固定しなきゃいいじゃん!ってことなんですけどね (´・ω・`)
えー ( ̄∀ ̄;)

というわけでして
現時点でここをご覧いただいた方でスクロール時におかしいという方は
Chromeとかー Firefoxとかー あれとかそれとかー
他のブラウザから見てね!!!! ということでお願いします(笑)
ってゆーか 最近のMicrosoftがクソ残念すぎて鼻血も出ないよ (´・ω・`)
誰か頭の良い方hackお願いします(切実)

ちなみにスクロールですが
スクロールバーをマウスで動かしてスクロールした場合には背景ブレを起こしません
マウススクロール時のみです
なんやそれっちゅーーーーねんっ!!!!

あとFC2さん広告周りでなんかやっとるよなー
ここ数日レイアウトがヒジョーに不安定 (´Д`υ)<はぁ =3

-------- 追記 同日

Microsoftのフォーラムを覗いてみたんだけども
容易に解決しそうではないですね (´・ω・`)
ちょっとJavascriptを利用してIE11とEdgeを判別するhackを見つけてやってみたとこと
多少軽減はされたのかな という感じ...
でも完璧ではないです
とりあえずこれで様子見ですかね...
既に配信済のものについてはhack版ということで順次修正していきます

関連記事

Comments 0

There are no comments yet.

Leave a reply

テンプレートに関するご質問・不具合のご報告の際はご自身のブログアドレス記載必須です
ご質問の前に必ずお読みください ↓
FC2テンプレート ご利用時のお願い