Bug 1340206 - Force compositing layer to avoid blurry RTL URL bar. r=Gijs
With Compact Themes and RTL locales, the URL bar becomes blurry on hover. This
seems to be triggered by the combination:
```
transform: scaleX(-1);
clip-path: none;
```
By forcing a compositing layer, the blurry issue goes away.
MozReview-Commit-ID: KKQt6h6VzT7
--- a/browser/themes/shared/compacttheme.inc.css
+++ b/browser/themes/shared/compacttheme.inc.css
@@ -207,16 +207,21 @@ toolbar[brighttext] #downloads-indicator
}
window:not([chromehidden~="toolbar"]) #urlbar-wrapper {
overflow: -moz-hidden-unscrollable;
clip-path: none;
margin-inline-start: 0;
}
+window:not([chromehidden~="toolbar"]) #urlbar-wrapper:-moz-locale-dir(rtl) {
+ /* Resolves text blurring issue when hovering, see bug 1340206 */
+ will-change: transform;
+}
+
#urlbar-zoom-button:-moz-lwtheme-brighttext:hover {
background-color: rgba(255,255,255,.2);
}
#urlbar-zoom-button:-moz-lwtheme-brighttext:hover:active {
background-color: rgba(255,255,255,.3);
}
