Как исправить баг в гуглхроме при использовании border-radius?

206
08 апреля 2019, 21:10

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

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 то проблемы нет. Подскажите как исправить данную проблему.? может проблема в коде? кто силен в верстке пожалуйста помогите с решением проблемки)

Answer 1

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

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

добавьте к transition

-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
 transition: all 0.5s ease;
READ ALSO
Не работает скролл в таблице
HTML

Не работает скролл в таблице

Как можно реализовать scroll контента в Desktop версии на каждой вкладке в pop-up? В мобильной версии (media query) вкладки пропадают и все вливается в одну...

 217
Как убрать рамку в input при вводе символов
HTML

Как убрать рамку в input при вводе символов

Подскажите, как убрать эту рамку как на изображении после клика мыши? Focus border none пробовал

 217
Как сделать блок изображений в виде колоды карт?
HTML

Как сделать блок изображений в виде колоды карт?

Есть,допустим, блок с изображениями

 202
Слайдер на мобильной версии
jQuery

Слайдер на мобильной версии

Добрый вечер, хочу сделать такой слайдер на разрешении 320px, по клику или свайпу меняется видео и текстКак это лучше реализовать? Моя идея сделать...

 193