8
0
Просмотр исходного кода

Fix: Use 3d translations to prevent blurry icons in toolbar on Firefox.

Maciej Gołaszewski 8 лет назад
Родитель
Сommit
34d3c78e2f

+ 5 - 2
packages/ckeditor5-ui/theme/components/dropdown/dropdown.css

@@ -19,7 +19,7 @@
 
 		position: absolute;
 		top: 50%;
-		transform: translate( 0, -50% );
+		transform: translate3d( 0, -50%, 0 );
 	}
 
 	/* Dropdown button should span horizontally, e.g. in vertical toolbars */
@@ -44,9 +44,12 @@
 
 	position: absolute;
 	left: 0px;
-	transform: translateY( 100% );
+	transform: translate3d( 0, 100%, 0 );
 }
 
 .ck-dropdown__panel-visible {
 	display: inline-block;
+
+	/* This will prevent blurry icons in dropdown on Firefox. See #340. */
+	will-change: transform;
 }

+ 3 - 0
packages/ckeditor5-ui/theme/components/icon/icon.css

@@ -11,6 +11,9 @@ svg.ck-icon {
 	/* Inherit cursor style (#5). */
 	cursor: inherit;
 
+	/* This will prevent blurry icons on Firefox. See #340. */
+	will-change: transform;
+
 	& * {
 		/* Inherit cursor style (#5). */
 		cursor: inherit;