このサイトは、只今WEB業界で活躍中のデザイナー、プログラマーの方々の情報を集めたweb統合情報サイトです。

Archives Details

Google Chrome v.44~ -webkit-transform → transformになってた。対応のまとめ。

JavaScript

2015.07.28

この記事は最終更新日から1年以上が経過しています。

「あれ。動かなくなっている。。」

数日前の出来事でした。

なんでだろう。。

と、chromeのバージョンアップに伴って、不具合が出始めたのもあって調べて見ると、

event.propertyName で取得できる「-webkit-transform」が → 「transform」になっているでは!

うはは。

-webkit-transform → transform と変更になって色々と不具合が出始めたので、フロント側の対応をまとめました。

CSS の対応

transformとかtransition系compassの@includeを利用していたので問題は特になかったのですが、

compassの古いバージョンを使っているのもあって、animationの@includeがない。。

-webkit-animation: anime-name 0.2s infinite;

@include animation(anime-name 0.2s infinite);

としたい。。。

と、いいのがありました ><

こちら、

https://github.com/ericam/compass-animation

https://github.com/ericam/compass-animation/blob/master/stylesheets/animation/_core.scss

もう、ナイスです!

https://github.com/ericam/compass-animation/blob/master/stylesheets/animation/_shared.scss

こちらも追加して、既存の_mixin.scssに追加。

サクッと置換

-webkit-animation:.(.*)\; 

@include animation($1); 

解決。

JavaScriptの対応

もちろんJavaScriptの方も影響が出ますよね。。

webkitTransitionEnd やら webkitAnimationEndで、結構イベント取得している。。。

Utilを追加致しました。

https://github.com/creatorish/support-util

ですが、ここのあたりとか

https://github.com/creatorish/support-util/blob/master/support-util.js#L42

vendor.transitionend = "webkitTransitionEnd";

決め打ちしちゃっていますので、このままではまずい。。

ということで、

http://davidwalsh.name/css-animation-callback

https://jonsuh.com/blog/detect-the-end-of-css-animations-and-transitions-with-javascript/

こちら等を参考に、イベント名を取得しました。

そうそう、webkitTransitionEnd等、直接取得出来ないので、ダミーのelement生成するこの方法は上手いですね!

で、こんな感じにマージを行い、

globalオブジェクトのUtilにadd。

deviceもいい感じにまとまっていましたので追加。

TransitionEnd、AnimationEnd、それぞれ、イベント名を取得することが出来ました。

これで、同じChromeでも、バージョン違いで、「animationend」「webkitAnimationEnd」となるのを吸収いたしました。

参考になればとー。

Comment

Related Article

OAuthのフローを可視化できるツールを作ってみました。

2020.05.17

令和の時代に、JavaScriptで Shift-JISファイル作成 全銀データフォーマットに対応する。

2020.03.03

インターネットにて世論調査を行う「世論Web」サービスを始めてみました。

2020.01.31

年末のレトロゲーム熱の際、ファミコンソフト一覧パッケージ作ってました。

2020.01.24

あと10日で「jsdo.it」のサービスが終わってしまう!! ソースダウンロードまだの方は急げぇ〜!

2019.10.21

正規表現 先読み後読み 論理積

2019.07.28

「二段階認証?」という方も 5分で覚える パスワードレス WebAuthnのまとめ

2019.07.07

上級者向け JavaScript 問題集 「javascript-questions」日本語翻訳担当してます。

2019.06.22

SPAサイトでの認証認可 JWT✗Rails5✗Nuxt.js

2019.03.24

Nuxt.js と auth-module (@nuxtjs/auth)で、JWT(JSON Web Tokens)& OAuth 認証 ログイン

2019.02.21

CATEGORY LIST

LATEST NEWS

Webassembly用いて、SDL 2.0をブラウザでレンダリング

C++

2020.08.10

macOS pyenv環境でtkinterが動かないので、再度インストール

Python

2020.08.09

Mac Home brewでSDL2.0を簡単に環境設定

C

2020.06.24

Django django-rest-auth + Nuxt.js auth-module で作る SPA JWT OAuth ログインシステム その3

Python

2020.06.14

Django django-rest-auth + Nuxt.js auth-module で作る SPA JWT OAuth ログインシステム その2

Python

2020.06.08

Django django-rest-auth + Nuxt.js auth-module で作る SPA JWT OAuth ログインシステム その1

Python

2020.06.07

このコロナ禍で、飛沫感染防止など求められる中「電子メモパッド」が重宝。 1300円で購入可能な電子メモパッドが超絶便利な件。

tool

2020.06.02

OAuthのフローを可視化できるツールを作ってみました。

JavaScript

2020.05.17

Django django-allauthで、サクッとソーシャルログイン機能を実装

Python

2020.04.12

部下を育てる技術

イベント

2020.04.08

令和の時代に、JavaScriptで Shift-JISファイル作成 全銀データフォーマットに対応する。

JavaScript

2020.03.03

インターネットにて世論調査を行う「世論Web」サービスを始めてみました。

JavaScript

2020.01.31

RANKING

Follow

SPONSOR

現在、掲載募集中です。



Links

About Us

WEBデザイナーの、WEBデザイナーによる、WEBデザイナーの為のサイト。「みんなで書こう!」と仲間を募ってみたが、結局書くのは自分だけとなってしまいました。日々のメモを綴っていきます。

Entry Profile

Graphical FrontEnd Engineer
- Daisuke Takayama

MAD CITY 北九州市で生まれ育つ。20代はバンド活動に明け暮れ、ふと「webデザイナーになりたい。」と思い、デジタルハリウッド福岡校入学。卒業後、数々の賞を受賞、web業界をざわつかせる。
現在、主に、ゲーム制作中心に港区六本木界隈で活動中。

FOLLOW US