Проблема с шестнадцатеричной обработкой CSS в ff/ie

Question

У меня есть шестиугольное меню на этом сайте, которое корректно работает в chrome, но оно имеет проблемы с рендерингом в FF и IE.

http://wrausch.de.w013b68e.kasserver.com/

При наведении меню шестиугольник в FF/IE вы можете увидеть 2 синие линии, которые не полностью охватываемые hovereffect.

Поскольку я только что получил сайт от коллеги, который ушел, я не знаю с чего начать.

Любая помощь будет оценена по достоинству.

Answer 1

Преобразованные элементы - как перекошенные элементы, которые вы использовали для создания шестиугольников, - попадают в позиции, которые измеряются в долях пикселя, и поэтому браузер должен судить о том, как отображать элементы на экране где математически совершенные формы должны быть представлены в сетке блочных пикселей.

Два прозрачных элемента расположены рядом друг с другом и слегка перекрываются из-за этого закругления. Поскольку элементы слегка прозрачны, любое перекрытие будет отображаться как темная линия.

Математически элементы не касаются, но из-за выражения и упрощения браузера они теперь немного перекрываются.

В Firefox строки появляются только после завершения перехода. Это происходит потому, что движок рендеринга ведет себя по-разному во время анимации, чем когда он завершен.

Чтобы исправить это, я попытался бы использовать полностью непрозрачные цвета фона, когда пользователь будет парировать. Таким образом, даже драматическое перекрытие не вызовет изменения цвета.