1. ホーム
  2. html

[解決済み] IEでCSS calc()とtransform:translateXを併用することはできません。

2023-03-16 05:25:37

質問

すべて

私は私のCSSでtransform:translateXでcalc()を使用できるようにしたいです。

例えば

#myDiv {
  -webkit-transform: translateX(calc(100% - 50px));
  -moz-transform: translateX(calc(100% - 50px));
  transform: translateX(calc(100% - 50px));
}

これは Chrome、Safari、Firefox で完全に動作しますが、IE10 および IE11 では動作しません。

簡単な例をここで見ることができます。 http://jsfiddle.net/SL2mk/9/

これは不可能なことなのでしょうか?IEのバグなのでしょうか、それとも calc() はこの文脈では機能しないことになっているのでしょうか?

参考までに - 私が読んだのは を参照してください。 を読むと、quot;stack" ができることがわかります。 translateX を重ねることで同じ効果を得ることができ、私のテストではこれを確認することができたようです。すなわち

#div {
  transform: translateX(calc(100% - 50px));
}

とは同じです。

#div {
  transform: translateX(100%) translateX(-50px);
}

しかし、これが最善で、最も信頼性が高く、将来性のある方法であるかどうかはわかりません。

また、私が知っているのは、このような方法で left の代わりに translateX の代わりに を使用することもできますが、私の理解では、後者はアニメーションを処理するために GPU を使用せざるを得ないので、トランジションで使用する場合はよりスムーズです。

アドバイスと洞察に前もって感謝します!

どのように解決するのですか?

これです。

transform: translateX(100%) translateX(-50px);

はパース時にコンパイルされますが、ここでは calc 式を :

transform: translateX(calc(100% - 50px));

は、ブラウザがその値を必要とするたびに解釈されなければなりません。式の結果はキャッシュすることができますが、私はブラウザがそのような最適化を使用することを当てにしません。

というわけで、a) 現在動作している、b) 有効である、c) 仕様が有効になるまで将来も動作する、という意味で最初のものがより優れていると言えます。