忍者ブログ
16 May

Easy Table of Contents 目次プラグイン使用の際 ヘッダー追尾分スムーズスクロールの調整

スムーズスクロールのオフセット
モバイルのスムーズスクロールのオフセット

この2つの設定が効かない
テーマ内のアンカーリンクのjsコードが邪魔してんだかわからんがとにかく数値設定してもダメ
ありがたいコード(引用元わからなくなりました…)をコピペさせていただく
これで追尾するヘッダーメニュー分を避けることができる
ただし普通の動作のように一発でいかず、一回普通に飛んだ後、下でいう「-100px」分スルッと動いて調整する動きになる。ちょっとこれがうーん。

<script type="text/javascript">
jQuery(function(){
jQuery('#ez-toc-container a[href^="#"]').click(function(){
var adjust = -100;
var speed = 500;
var href= $(this).attr("href");
var target = $(href == "#" || href == "" ? 'html' : href);
var position = target.offset().top + adjust;
$("html, body").animate({scrollTop:position}, speed, "swing");
return false;
});
});
</script>
PR
15 May

IE11 swiperがまったく動かなくなる アロー関数が原因

アロー関数ってやつがIE11は構文エラーで無理らしい


https://teratail.com/questions/101589
この人の直し構文を参考にした


cssはIEのみ対応とかできるが、jsはマジ無理です。全然わかんねーから
どう悪いのかjsの開発者ツールのデバッグの使い方全然わかんない

コンソールエラーで構文エラーでてたやつをで調べたらアロー関数とかでてきて、
ん?この対象のコードは「=>」アロー関数とやらを使ってるっぽいな?
ってわかって、IEで動くようにアロー関数をfunction(xxx)に直したら動いた

何がIEでダメなんてしらねーよまじで!!!!
私はコピペしたコードをはっただけなんだよjsはむりです
15 May

IE11 transform animation ガタつく

background-size:cover の背景画像をanimationで拡大
IE11のみガタガタぶるぶるする

transform:matrixで拡大してたんだが、何やっても治んないのでイライラしてscaleにしたら同じ動きだったのでscaleにした

【css3】IE11で transform :scale()などのアニメーションがカクつく時の対処法
https://sakatamemo.info/css/419/
↑とてつもないありがたいコード
animation keyframe内の拡大後の100%のtransformに rotate(0.1deg);を追加したら出来た!!!
100%{
transform: scale(1.5) rotate(0.1deg); 効果あり!!!!!

}


背景指定しているdivに
will-change: transform; 効果なし
 transform: rotate(0.0001deg); 効果なし
 transform: translate3d(0,0,0); 効果なし
backface-visibility:hidden; 効果なし

hoverとかのときは上の指定で上手くいったことも何度かあったため、
今回はanimationなので、keyframe内で一緒にちょびrotateを指定しないといけなかったっぽいのか?
ん、ていうかhoverのときはtransitionだからhover対象で微調整rotateとかつけるよな…
そうするとkeyframe内にrotateをつけるのは順当なのか…

どちらにせよもうIEまじしねよほんと
15 May

flexbox バグ IE

★上下中央寄せにならない
http://cmz.wp.xdomain.jp/?p=1002

囲っているものにdisplay:flex;をする
min-heightを使っているとダメらしい。heightならOK。heightがダメだからmin-height使ってるっつーのにIEまじしねよ




★画像がアスペクト比がおかしくなる対処法
https://personal.loudandproud.me/flexbox-ie-image-bug/
img {
  flex-shrink: 0;
}


★要素がはみ出す
https://qiita.com/hashrock/items/189db03021b0f565ae27#2-align-itemscenter-%E3%81%AF%E3%81%BF%E5%87%BA%E3%81%99%E5%95%8F%E9%A1%8C

囲っているものと、飛び出しているものにmax-with:100%;をつける
でも上下中央もなくなっていた…いつのまにか上下中央ができていないIE11まじ死ねよ


IEは早く滅びてほしい
web見た目の発展を妨げる害悪クソブラウザ
作業量が増えてどうしようもないゴミブラウザ