.element-invisible class does not work properly in Chrome and Safari for inline elements. It hides inline element and parent inline element with background image.
For example next html is correct in all browsers except Chrome and Safari. Chrome and Safari show only one image but should two.
<html><head>
<style type="text/css">
.element-invisible {
clip: rect(1px, 1px, 1px, 1px);
position: absolute !important;
}
.element-hidden {
display: none;
}
li {
display: inline;
margin: 7px;
}
a {
padding-left: 16px;
background-image: url(data:image/gif;base64,R0lGODlhEAAOALMAAOazToeHh0tLS/7LZv/0jvb29t/f3//Ub//ge8WSLf/rhf/3kdbW1mxsbP//mf///yH5BAAAAAAALAAAAAAQAA4AAARe8L1Ekyky67QZ1hLnjM5UUde0ECwLJoExKcppV0aCcGCmTIHEIUEqjgaORCMxIC6e0CcguWw6aFjsVMkkIr7g77ZKPJjPZqIyd7sJAgVGoEGv2xsBxqNgYPj/gAwXEQA7);
background-position: left center;
background-repeat: no-repeat;
}
</style>
</head>
<body>
<ul>
<li class="menu-login"><a href="#"><span class="element-invisible">Log in</span></a></li>
<li class="menu-logout"><a href="#"><span class="element-hidden">Log out</span></a></li>
</ul>
</body>
AlexR
Comments
Comment #1
JacineYes, I've noticed this as well, especially in vertical tabs. I've been using the following code, which is a combo of our original method and what's in the HTML5 Boilerplate module, but we should discuss and test.
We definitely need to fix this (in Drupal 8 first) and it's got to go back to D7 as well.
Comment #2
raal CreditAttribution: raal commentedI found next workaround.
I inserted next empty span before inline elements with invisible links.
<span style="padding-left: 1px; margin-left: -1px;"></span>
The next html works correct on all browsers.
To insert this hack in all menu links I inserted next function to my theme template.php.
Comment #3
mgiffordRelated issue:
#1057912: Border with Google Chrome and Safari in .element-invisible
Comment #4
JacineThis is a duplicate of #1057912: Border with Google Chrome and Safari in .element-invisible