[wp-trac] [WordPress Trac] #36183: Twenty Fourteen: Incompatibility with Right-To-Left (RTL) webpages AND the default video player

[WordPress Trac]

#36183: Twenty Fourteen: Incompatibility with Right-To-Left (RTL) webpages AND the
default video player
-------------------------------------+-------------------------
 Reporter:  samerafach               |       Owner:  (none)
     Type:  defect (bug)             |      Status:  closed
 Priority:  normal                   |   Milestone:
Component:  Bundled Theme            |     Version:  4.4.2
 Severity:  normal                   |  Resolution:  worksforme
 Keywords:  needs-testing has-patch  |     Focuses:  ui, rtl
-------------------------------------+-------------------------
Changes (by laurelfulford):

 * status:  reopened => closed
 * resolution:   => worksforme
 * milestone:  Awaiting Review =>


Old description:

> 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!

New description:

 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!

--

Comment:

 @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!

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/36183#comment:12>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform