.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

Jacine’s picture

Version: 7.x-dev » 8.x-dev
Component: system.module » CSS
Issue tags: +Needs backport to D7

Yes, 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.

.element-invisible {
  border: 0;
  clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
  clip: rect(1px, 1px, 1px, 1px);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute !important;
  width: 1px;
}

.element-invisible.element-focusable:active,
.element-invisible.element-focusable:focus {
  clip: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  position: static !important;
  width: auto;
}

We definitely need to fix this (in Drupal 8 first) and it's got to go back to D7 as well.

raal’s picture

I 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.

<!DOCTYPE html>
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head>
<style type="text/css">

.element-invisible1 {
  clip: rect(1px 1px 1px 1px);
  clip: rect(1px, 1px, 1px, 1px);
  position: absolute !important;
}

.element-invisible2 {
  border: 0;
  clip: rect(1px 1px 1px 1px);
  clip: rect(1px, 1px, 1px, 1px);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute !important;
  width: 1px;
}

.element-hidden {
  display: none;
}

a.link-1 {
  padding-left: 16px;
  background-color: red;
}
a.link-2  {
  padding-left: 16px;
  background-color: blue;
}
a.link-3  {
  padding-left: 16px;
  background-color: green;
}

</style>
</head>
<body>

With Chrome and Safari hack<br/>
<span style="padding-left: 1px; margin-left: -1px;"></span>   <!-- Chrome and Safari hack -->
<a class="link-1" href="#"><span class="element-invisible1">Link 1</span></a>
<a class="link-2" href="#"><span class="element-invisible2">Link 2</span></a>
<a class="link-3" href="#"><span class="element-hidden">Link 3</span></a>
<br/>

Without Chrome and Safari hack<br/>
<a class="link-1" href="#"><span class="element-invisible1">Link 1</span></a>
<a class="link-2" href="#"><span class="element-invisible2">Link 2</span></a>
<a class="link-3" href="#"><span class="element-hidden">Link 3</span></a>

</body>

To insert this hack in all menu links I inserted next function to my theme template.php.

function THEME_link($variables) {
  return '<span style="margin-left: -1px; padding-left: 1px;"></span><a href="' . 
    check_plain(url($variables['path'], $variables['options'])) . '"' . 
    drupal_attributes($variables['options']['attributes']) . '><span>' . 
    ($variables['options']['html'] ? $variables['text'] : check_plain($variables['text'])) . 
    '</span></a>';
}
mgifford’s picture

Jacine’s picture

Status: Active » Closed (duplicate)