-1

I've encountered a problem whereby a visually hidden flex item still takes up space within its container in IE11 despite not being visible. Within a flex container I have the logo text (with a visuallyhidden class applied), a logo background image and a menu button.

In Chrome, Firefox and Edge with the container's content set to space-between, the logo is at one end of the container and the menu button is at the other end. This is the desired behaviour.

In IE11 there's a large space in the left of the container, as though the hidden text is still there.

If anyone has a solution for this, perhaps a different method of visually hiding the text, it would be greatly appreciated.

I've reproduced the problem here: https://codepen.io/anon/pen/mwzYLv

.visuallyhidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: lightgrey;
  max-width: 1400px;
  margin: 0 auto;
  padding: 1em;
}

.logo {
  width: 100px;
  height: 100px;
  background-image: url('https://s2.postimg.org/x1g74vb61/33b869f90619e81763dbf1fccc896d8d--lion-logo-mode.jpg');
  background-size: 100px 100px;
}

button {
  height: 50px;
  width: 50px;
  padding: 0;
}
<header>
  <h1 class="visuallyhidden"><a href="#">Hidden logo text</a></h1>
  <a href="#" class="logo" aria-hidden="true"></a>
  <button>MENU</button>
</header>
Vadim Ovchinnikov
  • 13,327
  • 5
  • 62
  • 90
peardrops
  • 99
  • 1
  • 2
  • 9

1 Answers1

1

Oops, solved it. I wasn't thinking very logically with my markup there.

I've changed the markup so it looks like this, and it works as intended:

<header>
  <a href="#" class="logo"><h1 class="visuallyhidden">Hidden logo text</h1></a>
  <button>MENU</button>
</header>
peardrops
  • 99
  • 1
  • 2
  • 9