忍者ブログ
20 April

[PR]

×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

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まじしねよほんと
PR
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見た目の発展を妨げる害悪クソブラウザ
作業量が増えてどうしようもないゴミブラウザ
08 May

背景画像をhoverとかで拡大縮小したい

https://rfs.jp/sb/html/html-css-lab/background-image-zoom.html
ありがたいコードをコピペする

<div class="wrap">
<div class="背景設定"></div>
</div>

外枠にoverflow:hidden
背景設定に背景指定してtransform　matrix

coverを使うことがほとんどだから、ためになった
coverはscaleやbackgroud-sizeはうまくいかない
02 May

アイキャッチのURLを取得したい

http://arakaze.ready.jp/archives/4981

<?php the_post_thumbnail_url("full"); ?>

ごちゃごちゃやるのくそめんどいって思って検索したら
簡単にできるwpのタグができていたらしい
ありがたい