0

подскажите пожалуйста как исправить баг в хроме.

body{
  background:#1a2b3a;
}
.menu-wrap{
	width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 150px;
}

.menu{
	display: flex;
	margin: 0px;
	padding: 0px;
}

.menu li{
	padding: 30px;
	list-style: none;
	background: #eee;
	border-right: 1px solid #187faf;
	transition: 0.3s;
	position: relative;
	overflow: hidden;
	z-index: 1;
}

.menu li::before{
	position: absolute;
	content: "";
	width: 100%;
	height: 100%;
	background: #1292ce;
	left: 0;
	top: 0;
	display: block;
	z-index: -1;
	/*transition: 0.3s;*/
}

.menu li:hover:before{
	left: -100%;
	z-index: 1;
	transition: 0.5s;
}

.menu li::after{
	position: absolute;
	content: "";
	width: 100%;
	height: 100%;
	background: #1292ce;
	right: 0;
	top: 0;
	display: block;
	z-index: -1;
	/*transition: 0.3s;*/
}

.menu li:hover:after{
	right: -100%;
	z-index: 1;
	transition: 0.5s;
}

.menu li:first-child{
	border-radius: 30px 0 0 0;
}

.menu li:last-child{
	border-radius: 0px 30px 0 0;
	border-right: none;
}

.menu li:hover a{
	color: #1292ce;
	font-size: 16px;
}

.menu li a{
	text-decoration: none;
	color: #fff;
	text-transform: uppercase;
	font-size: 16px;
	font-weight: 600;
	transition: 0.5s;
}
<body>
 
 <div class="menu-wrap">
   <nav class="top-menu"><ul id="primary-menu" class="menu"><li id="menu-item-15" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home current-menu-item page_item page-item-8 current_page_item menu-item-15"><a href="http://lawyer/">главная страница</a></li>
<li id="menu-item-35" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-35"><a href="http://lawyer/%d0%be-%d0%bd%d0%b0%d1%81/">О нас</a></li>
<li id="menu-item-33" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-33"><a href="http://lawyer/%d1%8e%d1%80%d0%b8%d0%b4%d0%b8%d1%87%d0%b5%d1%81%d0%ba%d0%b8%d0%b5-%d0%bd%d0%be%d0%b2%d0%be%d1%81%d1%82%d0%b8/">Юридические новости</a></li>
<li id="menu-item-34" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-34"><a href="http://lawyer/%d0%bf%d0%be%d0%bb%d0%b5%d0%b7%d0%bd%d1%8b%d0%b5-%d1%81%d0%b5%d1%80%d0%b2%d0%b8%d1%81%d1%8b/">Полезные сервисы</a></li>
<li id="menu-item-36" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-36"><a href="http://lawyer/%d0%ba%d0%be%d0%bd%d1%82%d0%b0%d0%ba%d1%82%d1%8b/">контакты</a></li>
</ul></nav>                   
  </div>
  </body>

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

1
  • скрин - я так понимаю это они? Странно, но они появляются только если навести на "Главную" а потом перевести курсор на кнопку справа. Если же сверху наводить\убирать курсор, то такого не появляется :-)
    – Nilsan
    9 ноя 2018 в 8:44

1 ответ 1

0

протестировал на разных браузерах все одинаково, точек никаких нет!

возможно у вас появляется из-за кроссбраузерности

добавьте к transition

-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
 transition: all 0.5s ease;
1

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.