Safari中:after伪元素定位异常问题求助

问题出在你给按钮的伪元素用了position: fixed——这个定位是相对于浏览器整个视口的，Safari和Chrome在处理fixed定位时，若父元素带有特定布局属性（比如transform），表现会有差异，才导致箭头跑到窗口右下角。你要的是箭头跟着「Register」按钮，所以得换用相对+绝对的定位逻辑：

• 先给父元素.nav-register加相对定位，让伪元素以它为基准：

.nav-register {
  margin-right: 9px;
  position: relative; /* 新增这行 */
}

• 再修改伪元素的定位属性，把fixed换成absolute，同时调整位置参数让它贴在按钮右侧：

.nav-register:after {
  content: "";
  background: url("https://rtrx.wpenginepowered.com/wp-content/uploads/2024/01/button-arrow-black.svg") no-repeat;
  background-size: contain;
  display: inline-block;
  height: 1.2222222222222223rem;
  width: 1.2222222222222223rem;
  position: absolute; /* 替换fixed为absolute */
  bottom: auto; /* 移除fixed的bottom设置 */
  right: -1.5rem; /* 控制箭头和按钮的间距，可按需微调 */
  top: 50%; /* 让箭头垂直居中对齐按钮 */
  transform: translateY(-50%);
}

改完之后，箭头就会跟着「Register」按钮走，Chrome和Safari里的显示效果就能统一了。

内容的提问来源于stack exchange，提问作者Meredith Dixon