IE에서 transform : translateX와 함께 CSS calc ()를 사용할 수 없습니다.

IE에서 transform : translateX와 함께 CSS calc ()를 사용할 수 없습니다.

---

모두,

내 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()이 컨텍스트에서 작동하지 않아야합니까?

그만한 가치가 있습니다. 여기translateX 에서 동일한 효과를 얻기 위해 "스택"할 수 있다는 내용을 읽었 으며 제 테스트에서이를 확인하는 것 같습니다. 즉,

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

와 같다:

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

그러나 이것이 최선의, 가장 신뢰할 수 있으며 미래를 보장하는 방법인지 모르겠습니다.

나는 또한 left대신 사용할 수 있다는 것을 알고 translateX있지만 후자는 전환과 함께 사용할 때 훨씬 더 부드럽습니다. 그 이유는 내가 이해하는 것처럼 GPU를 사용하여 애니메이션을 처리하도록 강요하기 때문입니다.

귀하의 조언과 통찰력에 미리 감사드립니다!

---

이:

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

구문 분석 시간에 컴파일되지만 여기에는 계산식이 있습니다.

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

브라우저가 그 값을 필요로 할 때마다 해석되어야합니다. 표현식의 결과는 캐시 될 수 있지만 이러한 종류의 최적화를 사용하기 위해 브라우저에 의존하지는 않습니다.

따라서 첫 번째는 a) 지금 작동하고 b) 효과적이며 c) 사양이 적용될 때까지 향후 작동 할 것이라는 점에서 더 좋습니다.

---

나는 둘 다 -ms- 브라우저 선택기와 함께 사용합니다. 완벽하게 작동합니다.

-ms-transform: translateX(100%) translateX(-50px); /* IE 11 */
transform: translateX(calc(100% - 50px));

참고 URL : https://stackoverflow.com/questions/21469350/not-possible-to-use-css-calc-with-transformtranslatex-in-ie