增加浏览器缩放时,mediaelement.js音量控制混乱

Question

Media Element 2.12.0

这仅在FF和Chrome中发生(而不是在IE或Opera中).导航到具有媒体元素播放器的网站内容后,甚至到Media Element首页http://mediaelementjs.com/都有一个播放器.

当浏览器缩放设置为"正常"(通常按Ctrl + 0)时,它看起来没问题.

当缩放增加时(通过按Ctrl +或Ctrl +滚动鼠标滚轮),音量控制将放在整个元素下方.

上面的屏幕截图是在缩放比正常大一级的情况下制作的.

是否有一种方法可以使它在所有浏览器缩放中看起来都很好看？

Answer 1

似乎div.mejs控件的子节点在缩放页面时溢出,但它不是CSS情况.div.mejs-time-rail的大小是由Javascript动态生成的.(https://github.com/johndyer/mediaelement/blob/master/src/js/mep-player.js#L845)

我发现了一个可以简单解决问题的技巧,即将div.mejs-time-rail的宽度减少1px.

所以我在这里得到了一个快速修复.在mep-player.js,第845行(https://github.com/johndyer/mediaelement/blob/master/src/js/mep-player.js#L845)中,修改如下

total.width(railWidth - (total.outerWidth(true) - total.width()));

至

total.width(railWidth - (total.outerWidth(true) - total.width()) - 1);