IE11 翻译比例模糊图像

Posted 2023-03-05

【中文标题】IE11 翻译比例模糊图像

【英文标题】：IE11 translate scale blurry image

【发布时间】：2017-10-02 17:56:15

【问题描述】：

我正在尝试创建气球飞行的动画。除了 IE11 之外，所有现代浏览器都很好。

我使用 translateX 和 translateY 没有任何问题，但缩放导致图像变得模糊。

@media (min-width: 1100px) 
	.balloon-outer,
	.balloon-inner,
	.balloon 
		height: 100%;
		position: absolute;
		width: 100%;
		bottom: 0;
		right: 0;
		animation-duration: 60s;
		animation-delay: 0;
		animation-iteration-count: infinite;
		animation-direction: normal;
		will-change: transform;
		pointer-events: none;
	
	.balloon-outer overflow-y: hidden;
		transform-origin: 50% 50%;
		animation-name: travel-x;
		animation-timing-function: ease-in;
		transform: translateX(-20%);
	
	.balloon 
		transform-origin: 50% 50%;
		animation-name: travel-y;
		animation-timing-function: ease-out;
		transform: translateY(90%);
	
	.balloon-inner background:url("https://www.inty.com/wp-content/uploads/balloon.png") no-repeat scroll 100% 100% / auto 40%;
		transform-origin: 100% 100%;
		animation-name: scale;
		animation-timing-function: linear;
		transform: scale(3);
	


	@keyframes scale  
		0% transform: scale(3);
		80% transform: scale(0);
		100% transform: scale(0);
	
	@keyframes travel-x  
		0% transform: translateX(-10%);
		80% transform:translateX(-45%);
		100% transform:translateX(-45%);
	
	@keyframes travel-y  
		0% transform: translateY(120%);
		80% transform:translateY(-70%);
		100% transform:translateY(-70%);
	

<div class="balloon-outer"><div class="balloon"><div class="balloon-inner"></div></div></div>

http://codepen.io/rachelreveley/pen/xdLGEO

我已经尝试过这个我在几个地方看到过的技巧，但没有任何区别。

-webkit-backface-visibility: hidden; 
-ms-transform: translateZ(0); /* IE 9 */
-webkit-transform: translateZ(0); /* Chrome, Safari, Opera */
transform: translateZ(0);

【问题讨论】：

这似乎是导致模糊的变换比例。

可以附上截图吗？

您是否尝试过使用 caniuse.com 上列出的 cssSandpaper 库？ js 的 url 是 github.com/zoltan-dulac/cssSandpaper 你也可能会发现这个其他资源很有帮助 useragentman.com/IETransformsTranslator （也在 caniuse 上列出）

嗨@RReveley，你能在IE中看到这个codepen：codepen.io/anon/pen/jGzddY来验证模糊效果是否消失了吗？如果是，那么我认为 IE11 的主要问题是 transform3d 导致 gpu 处理加速，而 IE11 的硬件加速渲染会产生模糊的图像。不过，这在 Edge 上不是问题。面临同样的问题，但很难找到问题的实际原因。这是我最接近合理化 IE 行为的方法。

【参考方案1】：

尝试将您所有的translateX 和translateY 更改为translate3d，例如：

@keyframes travel-x  
    0% transform: translate3d(-10%,0,0);
    80% transform:translate3d(-45%,0,0);
    100% transform:translate3d(-45%,0,0);

@keyframes travel-y  
    0% transform: translate3d(0,120%,0);
    80% transform:translate3d(0,-70%,0);
    100% transform:translate3d(0,-70%,0);

在您的示例中使用translates 的所有地方都这样做。 translate3d 启用硬件加速，这将有助于动画。 您可以查看this post 了解更多信息。

【讨论】：

我已经根据您的建议更新了 Codepen，但遗憾的是它没有任何区别。不过感谢您的建议。

当您在 IE11 上尝试使用 codepen 时，您仍然看到图像模糊吗？我在 IE 11.0.10586 上看到它很好

仍然模糊。 IE 11.873.10586.0 似乎是引起问题的比例转换。

实际上，translate3d（和任何其他硬件加速转换）会导致 IE 中的文本模糊。只有 2d 变换产生清晰的渲染。

【参考方案2】：

您可以使用供应商前缀“-ms-transform”来回退到 IE-11。

例如：

.balloon-outer overflow-y: hidden;
        transform-origin: 50% 50%;
        animation-name: travel-x;
        animation-timing-function: ease-in;
        transform: translateX(-20%);
        -ms-transform: translateX(-20%);
    

在这里查看答案。

CSS3 transform:scale in IE

【讨论】：

这没什么区别。 IE 正在执行转换，它只是以一种模糊的方式进行。

好吧，我读到 IE 有它自己的缩放变换算法，但你应该用供应商前缀来称呼它：transform: -ms-scale(3);。你试过了吗？

我很怀疑，但我确实尝试过 :(

好的，我会做一些测试，让你知道它是否有效。