我正在开发一个主动使用CSS3过渡和基于Flexbox的布局的网站。它适用于Chrome,Firefox,iPad 2(Safari)甚至Windows Phone 8.1(不确定哪个版本的IE在那里)。但在边缘,我看到一些奇怪的视觉故障,似乎出现在悬停状态。 所以这是我在每个现代浏览器中得到的(显然除了Edge):
正如你所看到的,它完全搞砸了。而且Edge窗口右边还有另一个窗口,Edge会以某种方式将这个“麻烦”带到另一个窗口。此外,我无法截图(Edge在拍摄前重新绘制窗口),所以我在照片上拍摄了它。这不是唯一的错误地方,它发生在CSS转换的任何地方,独立地是什么以及它动画的时间。每一个麻烦都是独一无二的,我无法抓住一些模式并意识到问题所在。 起初它似乎是图形驱动程序或硬件问题,但它是一台新的计算机(“新”,我的意思是3天大),新的硬件和干净的Windows 10安装了每个更新,我看不到这样的东西Edge中的任何其他站点或任何其他浏览器或应用程序中的错误。 是常见还是只有我这么幸运?除了删除Edge中的任何动画外,我该怎么办?我的GPU是Intel HD 530,BTW。
更新:对不起,我忘了把它包括在内:
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('+7 (999) 999 99-99');
}
$(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">
<a href="catalogue.php" class="nav-link-container tt-trigger tt-left" data-tooltip="1"><span class="nav-link">Каталог</span></a><a href="touch-panels.php" class="nav-link-container tt-trigger tt-left" data-tooltip="2"><span class="nav-link">Тач-панели</span></a><a href="order.php" class="nav-link-container active"><span class="nav-link">Заказ</span></a> </div>
<a href="index.php" class="logo-link tt-trigger tt-center" data-tooltip="0"><img src="../assets/images/main-logo.png" alt="Логотип EON2" class="logo"></a>
<div class="flex">
<a href="where-to-buy.php" class="nav-link-container tt-trigger tt-right" data-tooltip="4"><span class="nav-link">Где купить</span></a><a href="support.php" class="nav-link-container tt-trigger tt-right" data-tooltip="5"><span class="nav-link">Под­держка</span></a><a href="contacts.php" class="nav-link-container tt-trigger tt-right" data-tooltip="6"><span class="nav-link">Кон­такты</span></a> </div>
</div>
</header>
<div class="toggle-button"><i class="fa fa-reorder"></i>Меню</div>
<header id="mobile-menu">
<div class="mobile-header-content">
<a href="index.php" class="logo-link"><img src="../assets/images/main-logo.png" alt="Логотип EON2" class="logo"></a>
<div class="flex">
<a href="catalogue.php" class="nav-link-container"><span class="nav-link">Каталог</span></a><a href="touch-panels.php" class="nav-link-container"><span class="nav-link">Тач-панели</span></a><a href="order.php" class="nav-link-container active"><span class="nav-link">Заказ</span></a> </div>
<div class="flex">
<a href="where-to-buy.php" class="nav-link-container"><span class="nav-link">Где купить</span></a><a href="support.php" class="nav-link-container"><span class="nav-link">Под­держка</span></a><a href="contacts.php" class="nav-link-container"><span class="nav-link">Кон­такты</span></a> </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="+7 (900) 800 70-60">
</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">
<a href="mailto:admin@admin.ru">Обратная связь</a>
<a href="not-offer.php">Оферта</a>
<a href="sitemap.txt" class="last-link">Карта сайта</a>
</div>
<span class="phone"><i class="fa fa-phone"></i> +7 (863) 231-09-18</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>
这是网站的一部分,它是非常粗略的,但应该是可读的。您只需单击“Меню”按钮并将鼠标悬停在某些链接上即可。它会在Edge中触发我的错误。