videojs default skin with vertical volumeslider causes viewport overflow in rtl layout
#7,743 创建于 2022年5月2日
描述
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.