CSS box-shadow causing elements to move in Safari-CodePudding

If I have HTML and CSS like this:

ul {
  columns: 2;
}

a:hover {
  background: red;
  box-shadow: 0 0 10px 5px red;
}

<ul>
  <li><a href="#">Item 1</a></li>
  <li><a href="#">Item 2</a></li>
  <li><a href="#">Item 3</a></li>
  <li><a href="#">Item 4</a></li>
  <li><a href="#">Item 5</a></li>
  <li><a href="#">Item 6</a></li>
</ul>

Then, using macOS Safari (v15.4), hovering over items, they move around to make space for the top of the box-shadow. In the left-hand column it even changes how many items appear in each column.

In iOS Safari (iOS 15.6) only the item at the top of the second column moves.

Firefox and Chrome keep all the elements still.

Any suggestions how to get Safari to do the same?

CodePudding user response：

https://css-tricks.com/snippets/css/complete-guide-grid/ try using grid will help solve the problem (you might need to change the order of your list to fit your style)

ul {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

CodePudding user response：

I can't check in the new version of Safari right now, but in older versions of IOS Safari (>=10.3) sometimes a similar solution helped:

ul * {
  will-change: opacity;
}

ul {
  columns: 2;
}

a:hover {
  background: red;
  box-shadow: 0 0 10px 5px red;
}

<ul>
  <li><a href="#">Item 1</a></li>
  <li><a href="#">Item 2</a></li>
  <li><a href="#">Item 3</a></li>
  <li><a href="#">Item 4</a></li>
  <li><a href="#">Item 5</a></li>
  <li><a href="#">Item 6</a></li>
</ul>

CodePudding user response：

You can just use grid:

ul {
  display: grid;
   grid-template: repeat(3, 1fr) / repeat(2, 1fr);
   grid-auto-flow: column;  
}

a {
 box-shadow: 0 0 1px 5px transparent;
}


a:hover {
  background: red;
  box-shadow: 0 0 10px 5px red;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<div class='col'>
<ul>
  <li><a href="#">Item 1</a></li>
  <li><a href="#">Item 2</a></li>
  <li><a href="#">Item 3</a></li>
  <li><a href="#">Item 4</a></li>
  <li><a href="#">Item 5</a></li>
  <li><a href="#">Item 6</a></li>
</ul>
  </div>
</body>
</html>