videojs default skin with vertical volumeslider causes viewport overflow in rtl layout
#7,743 创建于 2022年5月2日
仓库指标
- 星标
- (39,742 个星标)
- PR 合并指标
- (平均合并 111天 10小时) (30 天内合并 3 个 PR)
描述
Description
The viewport overflows because of the use of left:-3000em within a rtl html layout
Steps to reproduce
Explain in detail the exact steps necessary to reproduce the issue. Using the default skin. Set:
controlBar: {
volumePanel: {
vertical: true,
inline: false
}
}
Open a videojs player within a <html dir="rtl">-layout
Results
Expected
The viewport should not horizontally overflow
Actual
The viewport overflows on the left to -3000 em, as the overflow of viewport in rtl is always on the left.
This is a common problem with trying to push text offscreen. See also:
- https://www.zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement/
- https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
A quick way around this is using top:-negative (though might still have performance problems) or to clip the surface to invisible.
Additional Information
Please include any additional information necessary here. Including the following:
versions
videojs
what version of videojs does this occur with?
browsers
what browser are affected?
OSes
what platforms (operating systems and devices) are affected?
plugins
are any videojs plugins being used on the page? If so, please list them below.