1

При наведение на тег a двигаются нижние элементы. Не могу разобраться почему так происходит, вроде виноват scale, но не знаю как решить проблему. Буду очень благодарен за помощь.

	li { list-style-type: none;}
	.content { 
		margin: 0 auto;
		width: 580px;}
	.menu { 
		padding: 50px 0;
		margin: 0 auto;
		position: relative;
		background-color: rgba(0, 0, 0, 0.75);
		width: 500px;
		height: 400px;
		border-radius: 50%;		
		transition: background-color .4s linear;
		
		color: #fff; 
		overflow: hidden; }
	.menu:hover { 
		background-color: rgba(0, 0, 0, 0.4); 
		transition: background-color .4s linear; }
	li {
		font-size: 40px;
		display: block;
		line-height: 66px;

		box-sizing: border-box; }
	.link {
		white-space: nowrap; 
		display: block;
		text-align: center;
		text-transform: uppercase;
		cursor: pointer; 
		letter-spacing: 1px; 
		transform: scale(0.8);
		transition: transform .4s linear;
		filter: blur(0px); }
	.link:hover {
		color: #fff;
		background-color: rgba(129, 6, 29, 0.8); 
		transform: scale(1);
		transition: transform .4s linear;
		filter: blur(0px); }
<div class="content">
		<ul class="menu">
			<li><a class="link">Пункт</a></li>
			<li><a class="link">Пункт</a></li>
			<li><a class="link">Пункт</a></li>
			<li><a class="link">Пункт</a></li>
			<li><a class="link">Пункт</a></li>
			<li><a class="link">Пункт</a></li>
		</ul>	
	</div>

1 ответ 1

3

Добавь в .menu вот эти строки:

  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  backface-visibility: hidden;
  backface-visibility

Получится вот так:

li {
  list-style-type: none;
}

.content {
  margin: 0 auto;
  width: 580px;
}

.menu {
  padding: 50px 0;
  margin: 0 auto;
  position: relative;
  background-color: rgba(0, 0, 0, 0.75);
  width: 500px;
  height: 400px;
  border-radius: 50%;
  transition: background-color .4s linear;
  color: #fff;
  overflow: hidden;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  backface-visibility: hidden;
  backface-visibility
}

.menu:hover {
  background-color: rgba(0, 0, 0, 0.4);
  transition: background-color .4s linear;
}

li {
  font-size: 40px;
  display: block;
  line-height: 66px;
  box-sizing: border-box;
}

.link {
  white-space: nowrap;
  display: block;
  text-align: center;
  text-transform: uppercase;
  cursor: pointer;
  letter-spacing: 1px;
  transform: scale(0.8);
  transition: transform .4s linear;
  filter: blur(0px);
}

.link:hover {
  color: #fff;
  background-color: rgba(129, 6, 29, 0.8);
  transform: scale(1);
  transition: transform .4s linear;
  filter: blur(0px);
}
<div class="content">
  <ul class="menu">
    <li><a class="link">Пункт</a></li>
    <li><a class="link">Пункт</a></li>
    <li><a class="link">Пункт</a></li>
    <li><a class="link">Пункт</a></li>
    <li><a class="link">Пункт</a></li>
    <li><a class="link">Пункт</a></li>
  </ul>
</div>

Вроде это какой-то извечный баг вебкита https://bugs.webkit.org/show_bug.cgi?id=23364

что-то описано про это тут https://stackoverflow.com/questions/12278587/webkit-text-flickers-when-using-css-transform-scale/12377920#12377920


P.S. Но с данным решением ЕМНИП тоже не всё гладко и есть подводные камни. Но я не помню какие))

1

Ваш ответ

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

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