WordPress.org

Make WordPress Core

Opened 3 years ago

Closed 2 months ago

#36183 closed defect (bug) (worksforme)

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

Reported by: samerafach Owned by:
Milestone: Priority: normal
Severity: normal Version: 4.4.2
Component: Bundled Theme Keywords: needs-testing has-patch
Focuses: ui, rtl Cc:

Description (last modified by laurelfulford)

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!

Attachments (1)

36183.patch (508 bytes) - added by parsmizban 2 years ago.
This patch will fix Video Player for RTL, Regards

Download all attachments as: .zip

Change History (13)

#1 follow-up: @SergeyBiryukov
3 years ago

  • Component changed from Formatting to Bundled Theme
  • Description modified (diff)
  • Focuses ui rtl added
  • Summary changed from Incompatibility of Twenty Fourteen with Right-To-Left (RTL) webpages AND the default video player to Twenty Fourteen: Incompatibility with Right-To-Left (RTL) webpages AND the default video player

#2 in reply to: ↑ 1 ; follow-up: @samerafach
3 years ago

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.

#3 in reply to: ↑ 2 @SergeyBiryukov
3 years ago

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 :)

#4 follow-up: @karmatosed
3 years ago

  • Keywords needs-patch added

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

#5 @karmatosed
3 years ago

  • Milestone changed from Awaiting Review to Future Release

#6 in reply to: ↑ 4 @samerafach
3 years ago

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.

#7 @karmatosed
3 years ago

  • Milestone Future Release deleted
  • Resolution set to invalid
  • Status changed from new to closed

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

#8 @samerafach
3 years ago

  • Resolution invalid deleted
  • Status changed from closed to reopened

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

#9 @SergeyBiryukov
3 years ago

  • Milestone set to Awaiting Review

#10 @karmatosed
2 years ago

  • Keywords needs-testing added

@parsmizban
2 years ago

This patch will fix Video Player for RTL, Regards

#11 @parsmizban
2 years ago

  • Keywords has-patch added; needs-patch removed

#12 @laurelfulford
2 months ago

  • Description modified (diff)
  • Milestone Awaiting Review deleted
  • Resolution set to worksforme
  • Status changed from reopened to closed

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

Note: See TracTickets for help on using tickets.