Twenty Fourteen: Incompatibility with Right-To-Left (RTL) webpages AND the default video player

[samerafach]

First problem: There's a horrible bug in the WordPress theme-foundation (Not only the Twenty-Fourteen theme that I currently use) that affects all objects that depend on the orientation, including drop-down menus. For example, in this page:

​http://link.afach.de/rtlproblem

Apparently the menus are hidden to the fore-left, and then appear as drop-down when one hovers on them. Now the problem is that they really show up on the fore-left, creating an infinitely long horizontal scroll-bar. In the webpage, I fixed this problem using the CSS Tags:

    .primary-navigation ul ul, .primary-navigation ul ul ul {
        left:auto;
        right: -999em;
    }

    .primary-navigation ul li:hover > ul, .primary-navigation ul li.focus > ul {
        right: auto;
    }

which I got from an expert on Stackoverflow after this problem drove me really crazy because I, myself, am not a CSS expert. Anyway, please visit that page, and remove these tags, and see how the menus will appear, creating a very long horizontal scroll-bar that ruins the page.

Second problem: The same problem also exists with the default Wordpress video player. Without the following tag:

    .mejs-offscreen{
        right: -10000px;
        left: auto;
    }

the video-player will also create a very long horizontal scroll bar. Please try to remove it from the page and see for yourself.

Thank you for the great platform, Wordpress. I love it!

[samerafach]

Replying to SergeyBiryukov: It's not only about the theme. It's also about the Video player. I'm not sure whether I have to open another bug report for that.

[SergeyBiryukov]

Replying to samerafach:

It's not only about the theme. It's also about the Video player. I'm not sure whether I have to open another bug report for that.

Yes, please. Welcome to Trac and thank you for the reports :)

[karmatosed]

@samerafach, thanks for reporting this. Could you work on a patch for this? If not, we can absolutely work on one for you.

[samerafach]

Replying to karmatosed:

@samerafach, thanks for reporting this. Could you work on a patch for this? If not, we can absolutely work on one for you.

I'm sorry, I would love to, but I'm not an expert to be able to write such a patch.

[karmatosed]

This really seems to be for the video player. Can you do a core patch for that please @samerafach?

[samerafach]

@karmatosed This is not only for the video player. The video player is only half of the problem. Please read the report again and notice that there are two parts.

I'm sorry my skills are not good enough to fix this problem myself. I mentioned this before.

[parsmizban]

This patch will fix Video Player for RTL, Regards

[laurelfulford]

@samerafach Thanks for reporting this issue!

I can see the side-scrolling issue on your site linked above: ​http://link.afach.de/rtlproblem

... but I cannot recreate it when using Twenty Fourteen on a test site.

I tried working through your site in the Element Inspector, deleting items to rule them out -- the side-scroll appears to be coming from:

<div id="stcpDiv" style="position: absolute; top: -1999px; left: -1988px;">ShareThis Copy and Paste</div>

I'm not sure where this is coming from, whether it's something you can edit directly, or something in a plugin. If you can edit it directly, changing the left: -1988px to right: -1988px should fix it, like:

<div id="stcpDiv" style="position: absolute; top: -1999px; right: -1988px;">ShareThis Copy and Paste</div>

... and if you can't edit it directly, you should be able to change is using some custom CSS:

#stcpDiv {
    left: auto !important;
    right: -1988px !important;
}

@parsmizban thanks for the patch! It sounds like the issue was with the video player on the whole, not specific to Twenty Fourteen -- there was another ticket opened here by @samerafach: #36185

It has been closed due to lack of activity, but when I test it, it looks like the styles for .mejs-offscreen have changed (removing the left placement), so this should no longer be an issue:

.mejs-offscreen {
    border: 0;
    clip: rect(1px,1px,1px,1px);
    -webkit-clip-path: inset(50%);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    word-wrap: normal;

}

However, if this issue persists, please reopen #36185!

I'm going to close this issue, as I can't recreate either issue with a fresh install of Twenty Fourteen. But please let me know if there are any questions at all!