CSS box-shadow causing elements to move in Safari

Question

If I have HTML and CSS like this:

ul {
  columns: 2;
}

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


  Item 1
  Item 2
  Item 3
  Item 4
  Item 5
  Item 6

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?

user_17182878 · Answer

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;
}


  Item 1
  Item 2
  Item 3
  Item 4
  Item 5
  Item 6

user_12845832 · Answer

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;
}

user_17658664 · Answer

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;
}




  
  
  JS Bin




  Item 1
  Item 2
  Item 3
  Item 4
  Item 5
  Item 6

CSS box-shadow causing elements to move in Safari

3 Answers