Javascript 放大时如何删除div重新定位？（收缩浏览器）

我制作了一个简单的滑块，用于响应

mouseenter

事件

算法是当用户将鼠标指针移动到

出现的菜单内容之一时，一个名为
.slate
的div下降

我的问题是在Chrome或Opera中，当用户使用
CTRL+鼠标滚轮向上缩放时，
.slate
会溢出一点并平滑地恢复，而Firefox不会：



我正在寻找一种解决方案，以消除这种不必要的重新定位，但不使用
转换

我已尝试更动态地进行
转换
，以解决问题。将鼠标进入时的
转换添加到出现的
中，当鼠标进入
消失时将其删除

但是，这一个没有工作的另一个新问题。当我像这样摇动鼠标时，
转换将被忽略：


有没有办法解决这个问题

代码笔：/

片段（原件）：


“严格使用”；
班级名单{
构造函数（标题）{
this.header=document.querySelector（header）；
this.slate=document.querySelector（'.slate'）；
this.menu=this.header.querySelector（“.menu”）；
this.contents=this.menu.querySelectorAll（'.contents'）；
这个。addEvent（）；
}
addEvent（）{
this.contents.forEach（（cur，idx）=>{
cur.addEventListener（'mouseenter'，（e）=>this.expand（e，idx））；
})
}
展开（e，索引）{
设lesser=（指数<2），
三元={
切换：（较小）？this.slate.classList.add（'toggle'）：this.slate.classList.remove（'toggle'））
};
}
}
const proSlate=新板岩（“页眉”）
*{
保证金：0；
填充：0；
字体系列：Helvetica；
}
分区、分区、标题{
位置：相对位置；
}
李先生{
列表样式类型：无；
}
标题，.slate{
宽度：800px；
}
标题{
高度：100px；
线高：100px；
背景色：rgba（69255,0,4）；
}
斯莱特先生{
高度：400px；
线高：400px；
文本对齐：居中；
颜色：白色；
背景颜色：钢蓝色；
顶部：-25雷姆；
过渡：顶部500毫秒立方贝塞尔（0.455,0.03,0.515,0.955）；
z指数：-1；
字号：4rem；
}
.菜单{
宽度：100%；
显示器：flex；
}
.目录{
利润率：0.20px；
}
.切换{
排名：0；
}


出现
出现
消失
消失

板岩背景
不要使用
top
，而是使用
transform


“严格使用”；
班级名单{
构造函数（标题）{
this.header=document.querySelector（header）；
this.slate=document.querySelector（'.slate'）；
this.menu=this.header.querySelector（“.menu”）；
this.contents=this.menu.querySelectorAll（'.contents'）；
这个。addEvent（）；
}
addEvent（）{
this.contents.forEach（（cur，idx）=>{
cur.addEventListener（'mouseenter'，（e）=>this.expand（e，idx））；
})
}
展开（e，索引）{
设lesser=（指数<2），
三元={
切换：（较小）？this.slate.classList.add（'toggle'）：this.slate.classList.remove（'toggle'））
};
}
}
const proSlate=新板岩（“页眉”）
*{
保证金：0；
填充：0；
字体系列：Helvetica；
}
分区，
第节，
标题{
位置：相对位置；
}
ul，
李{
列表样式类型：无；
}
标题，
斯莱特先生{
宽度：800px；
}
标题{
高度：100px；
线高：100px；
背景色：rgba（69255,0,4）；
}
斯莱特先生{
高度：400px；
线高：400px；
文本对齐：居中；
颜色：白色；
背景颜色：钢蓝色；
转换：translateY（-100%）；
变换：变换500ms三次贝塞尔（0.455,0.03,0.515,0.955）；
z指数：-1；
字号：4rem；
}
.菜单{
宽度：100%；
显示器：flex；
}
.目录{
利润率：0.20px；
}
.切换{
变换：translateY（0）；
}


出现
出现
消失
消失

板岩背景
我在Chrome中也遇到了这个问题。超过33%到25%，这很好。谢谢你的回答。