Chrome与Firefox的CSS动画及垂直滑块兼容问题修复咨询

问题1：Chrome中hover多动画依次执行而非同时触发 #

原因 #

你把transition属性写在了:hover伪类内部，这意味着只有当元素处于hover状态时才会应用过渡规则。鼠标移入时，浏览器需要先加载过渡规则再执行动画，导致opacity、scale、padding等多个属性的动画不同步；鼠标移出时甚至没有过渡效果，元素会瞬间还原。

修复方案 #

将transition移到nav-list>li的默认样式中，让元素始终拥有过渡规则，这样鼠标移入移出时所有属性都会同时触发动画：

.nav-list>li{
  padding-right: 10px;
  opacity: 0.8;
  /* 把transition移到默认样式 */
  transition: all 0.4s ease;
}
.nav-list>li:hover{
  opacity: 1;
  cursor: pointer;
  scale: 1.11;
  padding-bottom: 100px;
  /* 移除这里的transition */
}

/* 移动端样式同步调整 */
@media (max-width:480px) {
  .nav-list>li{
    padding-left: 5px;
    transition: all 0.4s ease; /* 添加过渡规则 */
  }
  .nav-list>li:hover{
    padding-top:5px;
    padding-bottom:5px;
    padding-left: 15px;
    scale: 1.05;
    /* 移除这里的transition */
  }
}

问题2：Chrome中垂直input slider完全失效 #

原因 #

1. HTML中的orient="vertical"是非标准属性，Chrome不识别；
2. CSS中-webkit-appearance: none覆盖了之前的-webkit-appearance: slider-vertical，导致Chrome无法识别垂直滑块的默认样式；
3. 浏览器对垂直滑块的实现逻辑不同，Firefox依赖writing-mode，Chrome需要正确的WebKit属性顺序。

修复方案 #

1. 移除HTML中的orient="vertical"属性；
2. 调整CSS中-webkit-appearance的顺序，先设置垂直滑块样式，再自定义外观：

修改后的HTML

<input type="range" min="1" max="50" value='10' class='slider' />

修改后的CSS

.slider {
  writing-mode: bt-lr; /* Firefox垂直滑块兼容 */
  -webkit-appearance: slider-vertical; /* 先设置Chrome垂直滑块基础样式 */
  appearance: slider-vertical;
  width: 5px;
  height: 255px;
  background: #d3d3d3;
  outline: none;
  opacity: 0.5;
  transition: opacity .2s;
}

/* 保留原有滑块thumb样式 */
.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  background: #ffffff;
  cursor: pointer;
  border-radius: 50%;
}

.slider::-moz-range-thumb {
  width: 25px;
  height: 25px;
  background: #ffffff;
  cursor: pointer;
  border-radius: 50%;
}

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