css 变换，chrome 中的锯齿状边缘
问题描述 投票：0回答：14
我一直在使用 CSS3 变换来旋转网站中带有边框的图像和文本框。
问题是 Chrome 中的边框看起来呈锯齿状，就像没有抗锯齿的（低分辨率）游戏。在 IE、Opera 和 FF 中看起来好多了，因为使用了 AA（仍然清晰可见，但也没有那么糟糕）。我无法测试 Safari，因为我没有 Mac。
旋转后的照片和文字本身看起来不错，只是边框看起来有锯齿。
我使用的CSS是这样的：
.rotate2deg {
transform: rotate(2deg);
-ms-transform: rotate(2deg); /* IE 9 */
-webkit-transform: rotate(2deg); /* Safari and Chrome */
-o-transform: rotate(2deg); /* Opera */
-moz-transform: rotate(2deg); /* Firefox */
}
有什么办法可以解决这个问题，例如强制 Chrome 使用 AA？
以下示例：
14个回答
411
投票
投票
以防万一有人稍后搜索此内容，在 Chrome 中消除 CSS 转换上的锯齿状边缘的一个好技巧是添加值为
-webkit-backface-visibilityhidden-webkit-backface-visibility: hidden;
132
投票
投票
如果您使用
transitiontransform-webkit-backface-visibility: hidden;为了解决这个问题，我使用了：
outline: 1px solid transparent;28
投票
投票
添加1px透明边框会触发抗锯齿
outline: 1px solid transparent;
或者，添加 1px 透明框阴影。
box-shadow: 0 0 1px rgba(255,255,255,0);
21
投票
投票
尝试 3D 变换。这就像一个魅力！
/* Due to a bug in the anti-liasing*/
-webkit-transform-style: preserve-3d;
-webkit-transform: rotateZ(2deg);
16
投票
投票
我已经尝试了这里的所有解决方案，但对我的情况不起作用。但是使用
will-change: transform;
修复了锯齿状问题。
8
投票
投票
选择的答案（或任何其他答案）对我不起作用，但这确实有效：
img {outline:1px solid transparent;}2
投票
投票
我一直遇到 -45deg 的 CSS3 渐变问题。
backgroundbackground-size-45deg-45.0001deg在下面的 CSS 中，
background-size30pxdeg-45deg30px 0 @-webkit-keyframes progressStripeLTR {
to {
background-position: 60px 0;
};
}
@-moz-keyframes progressStripeLTR {
to {
background-position: 60px 0;
};
}
@-ms-keyframes progressStripeLTR {
to {
background-position: 60px 0;
};
}
@-o-keyframes progressStripeLTR {
to {
background-position: 60px 0;
};
}
@keyframes progressStripeLTR {
to {
background-position: 60px 0;
};
}
@-webkit-keyframes progressStripeRTL {
to {
background-position: -60px 0;
};
}
@-moz-keyframes progressStripeRTL {
to {
background-position: -60px 0;
};
}
@-ms-keyframes progressStripeRTL {
to {
background-position: -60px 0;
};
}
@-o-keyframes progressStripeRTL {
to {
background-position: -60px 0;
};
}
@keyframes progressStripeRTL {
to {
background-position: -60px 0;
};
}
.pro-bar-candy {
width: 100%;
height: 15px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
background: rgb(187, 187, 187);
background: -moz-linear-gradient(
-45.0001deg,
rgba(187, 187, 187, 1.00) 25%,
transparent 25%,
transparent 50%,
rgba(187, 187, 187, 1.00) 50%,
rgba(187, 187, 187, 1.00) 75%,
transparent 75%,
transparent
);
background: -webkit-linear-gradient(
-45.0001deg,
rgba(187, 187, 187, 1.00) 25%,
transparent 25%,
transparent 50%,
rgba(187, 187, 187, 1.00) 50%,
rgba(187, 187, 187, 1.00) 75%,
transparent 75%,
transparent
);
background: -o-linear-gradient(
-45.0001deg,
rgba(187, 187, 187, 1.00) 25%,
transparent 25%,
transparent 50%,
rgba(187, 187, 187, 1.00) 50%,
rgba(187, 187, 187, 1.00) 75%,
transparent 75%,
transparent
);
background: -ms-linear-gradient(
-45.0001deg,
rgba(187, 187, 187, 1.00) 25%,
transparent 25%,
transparent 50%,
rgba(187, 187, 187, 1.00) 50%,
rgba(187, 187, 187, 1.00) 75%,
transparent 75%,
transparent
);
background: linear-gradient(
-45.0001deg,
rgba(187, 187, 187, 1.00) 25%,
transparent 25%,
transparent 50%,
rgba(187, 187, 187, 1.00) 50%,
rgba(187, 187, 187, 1.00) 75%,
transparent 75%,
transparent
);
background: -webkit-gradient(
linear,
right bottom,
right top,
color-stop(
25%,
rgba(187, 187, 187, 1.00)
),
color-stop(
25%,
rgba(0, 0, 0, 0.00)
),
color-stop(
50%,
rgba(0, 0, 0, 0.00)
),
color-stop(
50%,
rgba(187, 187, 187, 1.00)
),
color-stop(
75%,
rgba(187, 187, 187, 1.00)
),
color-stop(
75%,
rgba(0, 0, 0, 0.00)
),
color-stop(
rgba(0, 0, 0, 0.00)
)
);
background-repeat: repeat-x;
-webkit-background-size: 60px 60px;
-moz-background-size: 60px 60px;
-o-background-size: 60px 60px;
background-size: 60px 60px;
}
.pro-bar-candy.candy-ltr {
-webkit-animation: progressStripeLTR .6s linear infinite;
-moz-animation: progressStripeLTR .6s linear infinite;
-ms-animation: progressStripeLTR .6s linear infinite;
-o-animation: progressStripeLTR .6s linear infinite;
animation: progressStripeLTR .6s linear infinite;
}
.pro-bar-candy.candy-rtl {
-webkit-animation: progressStripeRTL .6s linear infinite;
-moz-animation: progressStripeRTL .6s linear infinite;
-ms-animation: progressStripeRTL .6s linear infinite;
-o-animation: progressStripeRTL .6s linear infinite;
animation: progressStripeRTL .6s linear infinite;
}
2
投票
投票
在相关元素周围的 div 上添加以下内容为我解决了这个问题。
-webkit-transform-style: preserve-3d;
在我的情况下，视频窗口周围出现锯齿状边缘。
1
投票
投票
您也许可以使用模糊的box-shadows来掩盖锯齿。使用 -webkit-box-shadow 代替 box-shadow 将确保它不会影响非 webkit 浏览器。不过，您可能想检查 Safari 和移动 webkit 浏览器。
结果稍好一些，但仍然比其他浏览器差很多：
1
投票
投票
只是认为我们也会提出我们的解决方案，因为我们在 Chrome/Windows 上遇到了完全相同的问题。
我们尝试了上面@stevenWatkins 的解决方案，但仍然有“踩踏”。
而不是
-webkit-backface-visibility: hidden;
我们使用：
-webkit-backface-visibility: initial;
对我们来说这成功了🎉
0
投票
投票
对我来说，透视 CSS 属性起到了作用：
-webkit-perspective: 1000;
在我的例子中完全不合逻辑，因为我没有使用 3d 过渡，但仍然有效。
0
投票
投票
适用于 Chrome 中的画布（版本 52）
所有列出的答案都与图像有关。但我的问题是关于 chrome (v.52) 中带有变换旋转的画布。它们变得锯齿状，所有这些方法都无济于事。
适合我的解决方案：
- 使画布每边增大 1 px => 宽度和高度 +2 px；
- 以偏移量 + 1px（在位置 1,1 而不是 0,0）和固定大小（图像大小应比画布大小小 2px）绘制图像
- 应用所需的旋转
如此重要的代码块：
// Unfixed version
ctx.drawImage(img, 0, 0, 335, 218);
// Fixed version
ctx.drawImage(img, 1, 1, 335, 218);/* This style should be applied for fixed version */
canvas {
margin-left: -1px;
margin-top:-1px;
} <!--Unfixed version-->
<canvas width="335" height="218"></canvas>
<!--Fixed version-->
<canvas width="337" height="220"></canvas>示例：https://jsfiddle.net/tLbxgusx/1/
注意：有很多嵌套的div，因为它是我项目的简化版本。
此问题已为我重现也适用于 Firefox。 在 Safari 和 FF with retina 上没有这个问题。
和其他已找到的解决方案是将画布放入相同大小的div中，并将以下css应用于该div：
overflow: hidden;
box-shadow: 0 0 1px rgba(255,255,255,0);
// Or
//outline:1px solid transparent;
并且旋转应该应用于这个包装div。所以列出的解决方案是有效的，但需要进行一些小的修改。
此类解决方案的修改示例是：https://jsfiddle.net/tLbxgusx/2/
注意：请参阅带有“third”类的 div 样式。
0
投票
投票
对于 safari 16.2，任何提到的解决方案都不起作用。但我尝试了旋转并解决了问题。
transform: "rotatex(360deg)"
就我而言，我的视频元素有问题。
0
投票
投票
2024 年，我遇到了旋转图像和 Chromium 的问题。我的发现和解决方案是：
filter: brightness(1)工作不适用于高分辨率设备，例如智能手机。
outline: solid transparent在桌面上不如
filter: brightness(1)同时使用两者对于桌面来说并不完美，因为它的效果很差，如
outline: solid transparent所以我的最终解决方案仅对 HDPI 设备使用
outline: solid transparentimg { filter: brightness(1) } /* für Desktop-Chromium */
@media (min-resolution:1.2x) {
img { outline: solid transparent }
}
最新问题
- JPA查询内存泄漏？
- 在CKEditor中删除新行时如何防止块样式传播到后面的块？
- 如何在 Angular 2 中的 md-input 中验证电子邮件地址
- 迁移学习期间顺序模型中tensorflow_hub.KerasLayer的ValueError
- 如何通过类变量访问所有枚举成员？
- Springboot Keycloak Admin添加角色或重置密码错误
- React Native/Expo：无法读取 null 的属性“bubblingEventTypes”
- Autodesk Viewer getExternalIdMapping 长时间执行
- 如何获取使用Rest Api运行的Azure机器学习服务管道的状态？
- Teams 消息扩展：将授权标头添加到访问 Costum Web 服务器的 URL
- Next.js 应用程序路由在部署到 cPanel 后不起作用
- 从 GLUE 创建 redshift 表时出现错误
- ios 模拟器 Visual Studio Mac 2022 中的 Maui 应用程序不占用整个屏幕
- 使用 Ansible 启动处于停止状态的服务
- 如何在运行时访问 IEnumerable 的值<T>
- 如何指定使用 Azure 通信服务呼叫谁？
- 如何计算Dataframe大小？
- Spring core 5.3 41个jar文件
- 处理 Fabric Notebooks 中的秘密
- 帖子标题忽略上下文和模式，不适用于渲染中提供的 postId 和 postType 上下文
© www.soinside.com 2019 - 2024. All rights reserved.