Graphic trouble in MS Edge - css

Question

I'm developing a site that actively uses CSS3 transitions and flexbox-based layout. It works well in Chrome, Firefox, iPad 2 (Safari) and even in Windows Phone 8.1 (not sure which version of IE is in there). But in Edge I see some strange visual glitches, what seems to appear on hover state.
So here is what I get in every modern browser (except Edge, obviously):
And this is what get in Edge:
As you can see, it's totally messed up. And also there is another window right to the Edge window, and Edge somehow bring this "trouble" to another window. Moreover, I was not able to screenshot this (Edge repaints window right before shooting) so I've captured it on photo. This is not the only buggy place, it happens everywhere with CSS transitions, independetly what and for how long it animates. And every trouble is unique, I can't catch some pattern and realize what's the problem.
At first it seems like graphic driver or hardware issues, but it's a new computer (by "new" I mean 3-days-old) with new hardware and clean Windows 10 with every update installed, and I can't see anything like this bug on any other site in Edge or in any other browser or application.
Is it common or only I'm so lucky? And what can I do, except to remove any animation in Edge? My GPU is Intel HD 530, BTW.
upd: I'm sorry, I forgot to include this:
function calcTooltips() {
$('.photo').hide().show(0);
if ( $(window).innerWidth() >= 769 ) {
$('.tt-center').each(function() {
var index = $(this).data('tooltip');
var pPos = $(this).position();
var pWidth = $(this).outerWidth();
var pHeight = $(this).outerHeight();
$('.tooltip.tt[data-tooltip="' + index + '"]').css({
width: pWidth + 'px',
top: $('body').scrollTop() + pPos.top + pHeight + 'px',
left: pPos.left + 'px'
});
});
$('.tt-left').each(function() {
var index = $(this).data('tooltip');
var pPos = $(this).position();
var pWidth = $(this).outerWidth();
var pHeight = $(this).outerHeight();
$('.tooltip.tt[data-tooltip="' + index + '"]').css({
width: pWidth * 2 + 'px',
top: $('body').scrollTop() + pPos.top + pHeight + 'px',
left: pPos.left + 'px'
});
});
$('.tt-right').each(function() {
var index = $(this).data('tooltip');
var pPos = $(this).position();
var pWidth = $(this).outerWidth();
var pHeight = $(this).outerHeight();
$('.tooltip.tt[data-tooltip="' + index + '"]').css({
width: pWidth * 2 + 'px',
top: $('body').scrollTop() + pPos.top + pHeight + 'px',
left: pPos.left - pWidth + 'px'
});
});
}
}
function initTooltips() {
$(window).load(calcTooltips);
$(window).resize(calcTooltips);
$(window).scroll(calcTooltips);
$('.tt-trigger').hover(function() {
var index = $(this).data('tooltip');
$('.tooltip.tt[data-tooltip="' + index + '"]').finish().fadeIn('fast');
}, function() {
var index = $(this).data('tooltip');
$('.tooltip.tt[data-tooltip="' + index + '"]').fadeOut('fast');
});
}
function initMobileMenu() {
$(window).resize(function() {
if ( $(window).width() >= 961 ) {
$('#mobile-menu').hide();
$('main').removeClass('blurred');
$('footer').removeClass('blurred');
}
});
$('.toggle-button').click(function() {
$('#mobile-menu').toggle('slide', {}, 'fast');
$('main').toggleClass('blurred');
$('footer').toggleClass('blurred');
$('body').toggleClass('noscroll');
});
}
var didScroll;
var lastScrollTop = 0;
var delta = 50;
var navbarHeight = $('#classic-menu').outerHeight();
function hasScrolled() {
if ( $(window).innerWidth() >= 769 ) {
var st = $(this).scrollTop();
if(Math.abs(lastScrollTop - st) <= delta)
return;
if (st > lastScrollTop && st > navbarHeight) {
$('#classic-menu').removeClass('nav-down').addClass('nav-up');
$('.tooltip.tt').hide();
} else {
if(st + $(window).height() < $(document).height()) {
$('#classic-menu').removeClass('nav-up').addClass('nav-down');
}
}
lastScrollTop = st;
}
}
function initScroll() {
$(window).scroll(function(event){
didScroll = true;
});
$(window).resize(function(event){
$('#classic-menu').removeClass('nav-up').addClass('nav-down');
});
setInterval(function() {
if (didScroll) {
hasScrolled();
didScroll = false;
}
}, 250);
}
var activeSlide = '';
function initSlides() {
$('.slide').click(function() {
if ( !$(this).hasClass('active') ) {
$('.slide.active').removeClass('active');
$(this).toggleClass('active');
activeSlide = $(this).data('slide');
}
});
}
var formRegexps = {
'name': /^.{2,}$/,
'address': /^.{6,}$/,
'email': /^\w+([\.\w]+)*\w#\w((\.\w)*\w+)*\.\w{2,3}$/,
'tel': /^\+7 \([0-9]{3}\) [0-9]{3} [0-9]{2}-[0-9]{2}$/
}
var formReturns = {
'name': false,
'address': false,
'email': false,
'tel': false
}
function formValidate() {
var isValid = true;
$.each(formRegexps, function(key, value) {
var exp = new RegExp(formRegexps[key]);
formReturns[key] = exp.test($('#' + key).val());
if (!formReturns[key]) { isValid = false }
});
return isValid;
}
function formShowErrors() {
$.each(formReturns, function(key, value) {
if (!formReturns[key]) {
$('.' + key + '-message').show();
}
});
$('.check-message.overall-message').show();
}
function formHideErrors() {
$.each(formReturns, function(key, value) {
$('.' + key + '-message').hide();
});
$('.check-message.overall-message').hide();
$('#classic-menu').removeClass('nav-up').addClass('nav-down');
}
function initFormCheck() {
$('form').submit(function (evt) {
formHideErrors();
if ( formValidate() == true ) {
evt.preventDefault(); // DELETE THIS LATER
} else {
evt.preventDefault();
formShowErrors();
}
});
}
function initPhoneInput() {
$('#tel').mask('[phone]');
}
$(function() {
initTooltips();
initMobileMenu();
initScroll();
initSlides();
initFormCheck();
initPhoneInput();
});
/* Reset */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
a {
background: inherit;
color: inherit;
text-decoration: none;
}
ul {
list-style-type: none;
}
input,
select,
button {
outline: none;
}
img,
button,
.button,
.column h1,
.column h2,
.column h3,
.slide h1,
.slide h2,
.slide h3 {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* Colors */
/* Shadows */
/* Borders */
/* Typography */
body,
input,
button {
font-family: 'Roboto', sans-serif;
}
p {
font-size: 17px;
}
/* Media Queries */
/* Base Layout */
html {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
body,
header,
main,
nav,
footer,
.layout,
.column,
.container,
.links,
.header-content,
.flex,
.full-flex .splash-link-inner {
display: flex;
}
#media (max-width: 960px) {
body,
main,
footer {
transition: -webkit-filter 0.3s, -moz-filter 0.3s, filter 0.3s;
}
}
body {
flex-flow: column;
min-height: 100vh;
background: url('../assets/images/temp-bg.jpg') fixed;
background-size: cover;
}
main {
flex: 1 0 auto;
align-self: center;
margin: 87px 0 0 0;
padding: 1rem 0 0 0;
justify-content: center;
align-items: flex-start;
width: 100%;
}
#media (max-width: 960px) {
main {
margin: 0;
padding: 4rem 0 0 0;
}
}
p {
margin: 1rem;
}
.photo {
width: 100%;
}
/* Containers */
.main.container {
flex-flow: column;
background: rgba(0, 0, 0, 0.8);
color: #F7F7F7;
padding: 1rem 1rem 0 1rem;
margin: 0 0 1rem 0;
width: 100%;
max-width: 960px;
}
.main.container.narrow {
max-width: 640px;
}
/* Header */
header {
z-index: 101;
flex-shrink: 0;
justify-content: center;
align-items: center;
background: rgba(0, 0, 0, 0.8);
border-bottom: 1px solid #F7F7F7;
position: fixed;
top: 0;
width: 100%;
transition: top 0.2s;
}
.header-content {
justify-content: space-around;
flex: 1;
padding: 0 .5rem;
}
/* Footer */
footer {
z-index: 100;
width: 100%;
height: auto;
min-height: 1.4rem;
padding: 1rem 0;
justify-content: flex-end;
background: rgba(0, 0, 0, 0.6);
color: #F7F7F7;
}
#media (max-width: 768px) {
footer {
flex-flow: column;
align-items: center;
}
}
footer .links {
min-height: 1.4rem;
}
#media (max-width: 768px) {
footer .links {
padding-right: 1rem;
}
}
footer .links a {
margin: 0 1rem;
}
#media (max-width: 540px) {
footer .links a {
margin-left: 0;
margin-right: .5rem;
}
}
#media (max-width: 768px) {
footer .links a.last-link {
margin-right: 0;
}
}
footer .links a:hover {
opacity: 1;
border-bottom: 2px dashed #FFF;
}
#media (max-width: 768px) {
footer .links,
footer .copyright {
margin: 0;
padding: 0;
}
}
footer .phone {
margin: 0 1rem;
}
#media (max-width: 768px) {
footer .phone {
display: none;
}
}
footer .phone:hover {
opacity: 1;
}
footer .copyright,
footer .links a,
footer .phone {
opacity: 0.8;
}
/* Horizontal Divider */
hr {
border-color: #F7F7F7;
}
/* Links */
.splash-link,
.nav-link-container {
transition: .3s;
}
/* Buttons */
.button {
display: block;
padding: 0 1rem;
line-height: 2rem;
transition: .2s;
border: 0;
cursor: pointer;
font-size: 16px;
}
.button i {
margin-right: .5rem;
}
.button.accent {
background: #F7F7F7;
color: #303030;
}
.button.accent:hover,
.button.accent:active {
background: #dedede;
}
.action {
background: #FF530D;
color: #F7F7F7;
}
.action:focus {
background: #FF530D;
color: #F7F7F7;
}
.action:hover,
.action:active {
background: #d93f00;
}
.positive {
background: #1ABC9C;
color: #F7F7F7;
}
.positive:focus {
background: #1ABC9C;
color: #F7F7F7;
}
.positive:hover,
.positive:active {
background: #148f77;
}
.neutral {
background: #F7F7F7;
color: #303030;
}
.neutral:focus {
background: #F7F7F7;
color: #303030;
}
.neutral:hover,
.neutral:active {
background: #dedede;
}
.negative {
background: #E74C3C;
color: #F7F7F7;
}
.negative:focus {
background: #E74C3C;
color: #F7F7F7;
}
.negative:hover,
.negative:active {
background: #d62c1a;
}
/* Forms */
input,
select {
margin-left: .5rem;
padding: .5rem;
}
input {
font-size: 18px;
letter-spacing: .25px;
}
input:not(.modal) {
border: none !important;
}
select {
font-size: inherit;
}
/* Helpers */
.left-sided {
padding-left: 1rem;
margin-right: auto;
}
.right-sided {
padding-right: 1rem;
margin-left: auto;
}
.left-fixed {
left: 0;
}
.right-fixed {
right: 0;
}
.flex {
flex: inherit !important;
}
.full-flex {
flex: 1 1 100% !important;
}
#media (max-width: 960px) {
.hideable {
display: none;
}
}
.hidden {
display: none;
}
.blurred {
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
filter: blur(5px);
}
.noscroll {
overflow: hidden;
}
.uppercase {
text-transform: uppercase;
}
.lowercase {
text-transform: lowercase;
}
.nav-up {
top: -88px;
}
/* Menu */
#media (max-width: 960px) {
#classic-menu .header-content,
#mobile-menu .header-content {
display: none;
}
}
#classic-menu .nav-link-container,
#mobile-menu .nav-link-container {
display: flex;
flex: 1;
align-items: center;
color: #F7F7F7;
text-align: center;
justify-content: center;
}
#classic-menu .nav-link-container .nav-link,
#mobile-menu .nav-link-container .nav-link {
font-weight: bold;
text-transform: uppercase;
}
#classic-menu .nav-link-container .nav-link:after,
#mobile-menu .nav-link-container .nav-link:after {
content: '';
display: block;
margin: auto;
height: 3px;
width: 0px;
background: transparent;
transition: width 0.2s ease, background-color 0.2s ease;
}
#classic-menu .nav-link-container.active,
#mobile-menu .nav-link-container.active {
color: #ababab;
}
#classic-menu .nav-link-container:hover:not(.active) > .nav-link:after,
#mobile-menu .nav-link-container:hover:not(.active) > .nav-link:after {
width: 100%;
background: #F7F7F7;
}
#mobile-menu {
width: 100%;
height: 100%;
position: fixed;
margin-top: 51px;
display: none;
}
#mobile-menu .mobile-header-content {
margin-top: -102px;
width: 100%;
}
#mobile-menu .mobile-header-content .logo-link {
display: flex;
align-items: center;
justify-content: center;
}
#media (max-height: 280px) {
#mobile-menu .mobile-header-content .logo-link {
display: none;
}
}
#mobile-menu .mobile-header-content .nav-link {
padding: 1rem;
}
/* Logo */
.logo {
width: 220px;
}
/* Toggle Button */
.toggle-button {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
position: fixed;
background: rgba(0, 0, 0, 0.8);
left: 0;
right: 0;
cursor: pointer;
text-align: center;
font-weight: bold;
text-transform: uppercase;
color: #F7F7F7;
padding: 1rem;
z-index: 102;
display: none;
}
#media (max-width: 960px) {
.toggle-button {
display: block;
}
}
.toggle-button i {
width: 30px;
}
/* Tooltips */
.tooltip {
text-align: center;
background: rgba(0, 0, 0, 0.8);
color: #F7F7F7;
position: absolute;
z-index: 1000;
display: none;
}
.tooltip p {
margin: .65rem;
}
/* Slide */
.slides.container {
margin-bottom: 1rem;
justify-content: space-between;
}
#media (max-width: 540px) {
.slides.container {
flex-flow: column;
}
}
.slides.container .slide {
display: flex;
align-items: flex-end;
justify-content: center;
flex: 1;
min-height: 200px;
padding: 1rem;
cursor: pointer;
box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
margin: 0 1rem 0 0;
transition: .2s;
}
#media (max-width: 540px) {
.slides.container .slide {
margin: 0 0 1rem 0;
align-items: center;
min-height: 100px;
}
.slides.container .slide:hover {
flex: 1;
}
}
.slides.container .slide .header {
text-shadow: 0 2px 5px #000;
transition: .2s;
}
.slides.container .slide:hover:not(.active) {
flex: 3;
}
.slides.container .slide.first-slide {
background-image: url('../assets/images/first-option.jpg');
background-size: cover;
}
.slides.container .slide.second-slide {
background-image: url('../assets/images/second-option.jpg');
background-size: cover;
}
.slides.container .slide.third-slide {
background-image: url('../assets/images/third-option.jpg');
background-size: cover;
margin: 0;
}
.slides.container .slide.active {
opacity: .5;
cursor: default;
}
.slides.container .slide.active .header {
text-shadow: none;
}
/* Form */
.form {
margin-top: 1rem;
margin-bottom: 1rem;
}
.form form {
display: flex;
flex-flow: column;
}
.form form .row {
display: flex;
align-items: center;
margin-bottom: 1rem;
}
.form form .row label {
width: 100px;
}
.form form .row input {
width: 100%;
}
.form button {
align-self: flex-end;
}
.asterisk {
margin: 0 .2rem 0 .2rem;
color: #FF3800;
}
/* Paragraph Override */
p {
margin: 0;
}
p.check-message {
margin: 0 0 1rem 100px;
text-align: center;
display: none;
}
p.check-message .fa {
color: #FF3800;
}
p.check-message.overall-message {
border-top: 1px solid #F7F7F7;
margin: 0 0 1rem 0;
padding: .5rem 0 0 0;
}
<!doctype html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title></title>
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="format-detection" content="telephone=no">
<link rel="icon" href="../favicon.ico?v=2">
<link rel="stylesheet" href="../styles/vendor/pace.css">
<script src="../scripts/vendor/pace.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,700&subset=latin,cyrillic">
<link rel="stylesheet" href="../styles/vendor/font-awesome.min.css">
<!-- FOR DEVELOPMENT ONLY -->
<link rel="stylesheet" href="../styles/order.dev.css"> <!-- END -->
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/less.js/2.7.1/less.min.js"></script> -->
</head>
<body><header id="classic-menu" class="remodal-bg">
<div class="header-content">
<div class="flex">
<span class="nav-link">Каталог</span><span class="nav-link">Тач-панели</span><span class="nav-link">Заказ</span> </div>
<img src="../assets/images/main-logo.png" alt="Логотип EON2" class="logo">
<div class="flex">
<span class="nav-link">Где купить</span><span class="nav-link">Под­держка</span><span class="nav-link">Кон­такты</span> </div>
</div>
</header>
<div class="toggle-button"><i class="fa fa-reorder"></i>Меню</div>
<header id="mobile-menu">
<div class="mobile-header-content">
<img src="../assets/images/main-logo.png" alt="Логотип EON2" class="logo">
<div class="flex">
<span class="nav-link">Каталог</span><span class="nav-link">Тач-панели</span><span class="nav-link">Заказ</span> </div>
<div class="flex">
<span class="nav-link">Где купить</span><span class="nav-link">Под­держка</span><span class="nav-link">Кон­такты</span> </div>
</div>
</header>
<div class="tooltip tt" data-tooltip="0">
<p>Главная страница</p>
</div>
<div class="tooltip tt" data-tooltip="1">
<p>Каталог стан­дарт­ных решений на основе ПЛК</p>
</div>
<div class="tooltip tt" data-tooltip="2">
<p>Передовые решения с исполь­зованием тач-панелей</p>
</div>
<div class="tooltip tt" data-tooltip="3">
<p>Заказ уникаль­ного решения</p>
</div>
<div class="tooltip tt" data-tooltip="4">
<p>Информация о магазинах</p>
</div>
<div class="tooltip tt" data-tooltip="5">
<p>Обновление ПО и замена запчастей</p>
</div>
<div class="tooltip tt" data-tooltip="6">
<p>Адреса и телефоны</p>
</div><main>
<div class="main container narrow">
<div class="slides container">
<div class="slide first-slide " data-slide="first"><h2 class="header">First Option</h2></div>
<div class="slide second-slide " data-slide="second"><h2 class="header">Second Option</h2></div>
<div class="slide third-slide " data-slide="touch-panel"><h2 class="header">Тач-панель</h2></div>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda deleniti, beatae eum totam odit expedita modi laudantium praesentium, quasi vero nihil doloribus consequatur! Aspernatur quae numquam nulla quidem iusto reiciendis hic deserunt a eaque ad ipsa, quibusdam magni laborum similique, rem laboriosam odit! Voluptates adipisci magni expedita fugit autem totam.</p>
<div class="form">
<form action="" method="post">
<div class="row">
<label for="name">Имя<span class="asterisk">*</span>:</label>
<input type="text" name="name" id="name" placeholder="Иван Иванов">
</div>
<p class="check-message name-message"><i class="fa fa-warning"></i> Имя должно состоять из 2 символов или более.</p>
<div class="row">
<label for="address">Адрес<span class="asterisk">*</span>:</label>
<input type="text" name="address" id="address" placeholder="ул. Первая, 32">
</div>
<p class="check-message address-message"><i class="fa fa-warning"></i> Адрес должно состоять из 7 символов или более.</p>
<div class="row">
<label for="email">E-mail:</label>
<input type="text" name="email" id="email" placeholder="example#mail.ru">
</div>
<p class="check-message email-message"><i class="fa fa-warning"></i> E-mail должен быть верным.</p>
<div class="row">
<label for="tel">Телефон<span class="asterisk">*</span>:</label>
<input type="text" name="tel" id="tel" placeholder="[phone]">
</div>
<p class="check-message tel-message"><i class="fa fa-warning"></i> Телефон должен состоять только из цифр.</p>
<p class="check-message overall-message">Форма заполнена неверно. Обратите внимание, что так <span class="asterisk">*</span> помечены обязательные к заполнению поля.</p>
<button class="positive button"><i class="fa fa-check"></i> Отправить</button>
</form>
</div>
</div>
</main> <footer class="remodal-bg">
<span class="left-sided copyright">© 2009—2016 ООО «ИПН»</span>
<div class="links">
Обратная связь
Оферта
Карта сайта
</div>
<span class="phone"><i class="fa fa-phone"></i> [phone]</span>
</footer>
<script src="https://code.jquery.com/jquery-2.2.3.min.js" integrity="sha256-a23g1Nt4dtEYOj7bR+vTu7+T8VP13humZFBJNIYoEJo=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.12.0-rc.2/jquery-ui.min.js" integrity="sha256-55Jz3pBCF8z9jBO1qQ7cIf0L+neuPTD1u7Ytzrp2dqo=" crossorigin="anonymous"></script>
<script src="../scripts/vendor/maskedinput.min.js"></script>
<script src="../scripts/order.js"></script>
</body>
</html>
This is a part of site, it was taken very roughly, but should be readable. All you need to do is to click on "Меню" button and hover on some links. It triggers bug for me in Edge.