Bug 1340206 - Disable transform to avoid blurry RTL URL bar. r=Gijs a=css-image-only
authorJ. Ryan Stinnett <jryans@gmail.com>
Fri, 24 Feb 2017 19:10:33 -0600
changeset 378868 b946ece0c9d2bf34a925d13d08be2724f275dfd5
parent 378867 b48af7ab022592485ef72fb0250c447ea6156c80
child 378869 c565a618690d15933c1cd3a2830bc87ca8d21e7f
push id1419
push userjlund@mozilla.com
push dateMon, 10 Apr 2017 20:44:07 +0000
treeherdermozilla-release@5e6801b73ef6 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersGijs, css-image-only
bugs1340206
milestone53.0a2
Bug 1340206 - Disable transform to avoid blurry RTL URL bar. r=Gijs a=css-image-only 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; ``` The transform is was only applied to position the clip-path correctly, so it's actually not needed by Compact Themes. MozReview-Commit-ID: KKQt6h6VzT7
browser/themes/shared/compacttheme.inc.css
--- a/browser/themes/shared/compacttheme.inc.css
+++ b/browser/themes/shared/compacttheme.inc.css
@@ -207,16 +207,25 @@ 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),
+window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar:-moz-locale-dir(rtl) {
+  /* Resolves text blurring issue when hovering, see bug 1340206 */
+  transform: none;
+  /* For some reason, this property must be specified here, even though the same
+     value is set in the previous rule set. o_O */
+  margin-inline-start: 0;
+}
+
 #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);
 }