Fix rendering problems with scaled content and CSS hover transitions #531 @0:15

diff --git a/less/003-mixins.less b/less/003-mixins.less
index b2ee9d66e39203ef3070354d863e9166e469f2cd..414003938950758add5b4e891bf7fcaf010e8d5d 100644 (file)
--- a/less/003-mixins.less
+++ b/less/003-mixins.less
@@ -111,18 +111,20 @@
 .longarrow-button(@padding-vertical: 23px, @padding-horizontal: 40px, @offset: 20px, @offset-arrow: -5px) {
        padding: @padding-vertical @padding-horizontal;
        position: relative;
-       transition: all @transition-time-buttons;
+       transition: padding @transition-time-buttons;
        line-height: 0.8em;
 
        &:after {
                content: '-';
+        .font-thinning();
                font-family: @icons;
                font-size: 1.5em;
                position: absolute;
                top: @padding-vertical;
                right: @padding-horizontal - @offset - @offset-arrow;
                opacity: 0;
-               transition: opacity @transition-time-buttons;
+               visibility: hidden;
+               transition: visibility @transition-time-buttons;
        }
 
        &:hover, &:active {
@@ -130,6 +132,7 @@
                padding-left: @padding-horizontal - @offset;
 
                &:after {
+                       visibility: visible;
                        opacity: 1;
                }
        }