Skip to content
This repository has been archived by the owner on Oct 8, 2021. It is now read-only.

Using popups with dir="rtl" messes up rendering on Safari, iPhone/iPad and Chrome Mobile #5440

Closed
asafxrev opened this issue Jan 12, 2013 · 6 comments
Closed

Using popups with dir="rtl" messes up rendering on Safari, iPhone/iPad and Chrome Mobile #5440

asafxrev opened this issue Jan 12, 2013 · 6 comments

Comments

@asafxrev
Copy link

When adding a popup to a page, if the popup div inherits or otherwise assigned 'direction: rtl', for instance by having dir="rtl" on <body>, the default view on Safari is a blank page (the page is on the right but popup directs focus to the left somehow, even when it's inactive).

On Chrome Mobile, weirder things happen - text boxes don't get filled, collapsibles won't open, etc.

To reproduce see this simple file: https://dl.dropbox.com/u/33307998/safari_chrome_mobile_repro.html

Open it in Safari, then remove the "rtl" property and open it again.
@asafxrev
Copy link
Author

Temporary workaround - place popup inside the page, but outside content, remove "rtl" from body or any anscestor divs, and use this rule:

div[data-role="header"], div[data-role="content"],
div[data-role="footer"], div[data-role="popup"] p {
direction: rtl;
}

(oh, place text inside popup in <p> elements)

@jaspermdegroot
Copy link
Contributor

@asafxrev

The problem is the combination of dir="rtl", having the page wrapped in another element (in your case a form), and using a widget where we use position: absolute; top: -99999px; left: -9999px; to hide an element. We use this for the popup widget, but also in some form widgets to hide the native form element.

Two ways to resolve your issue with custom CSS. Set left: auto; right: -9999px; for the element we hide or, much easier... body { overflow-x: hidden; }.

code: http://jsbin.com/ehowik/13/edit (also margin: 0; to override browsers' default margin for the body)
preview: http://jsbin.com/ehowik/13 (text is underneath the "edit in JS Bin label")

Closing the issue as resolved.

@asafxrev
Copy link
Author

Thanks Jasper. I will try it out. However, your solution is still somewhat of a workaround. In my opinion, Jquery Mobile should be able to work well with rtl direction.

I suggest changing the popup logic such that if rtl is set, it'll use position: absolute; top: -99999px; right: -9999px;, note the right instead of left. That should solve it, not?

Alternatively, let's at least change the documentation on PopUp in jquerymobile.com to indicate the issue.

Could you please reopen the bug?

Thanks,
Asaf

@jaspermdegroot
Copy link
Contributor

@asafxrev

The CSS in your comment is same as the first solution I mentioned, but you would have to negate the left offset too by setting it to auto. Since we use this approach 12 times in the CCS (not only for popup) it doesn't seem very effective to me to override this for "rtl", while just setting overflow-x: hidden for the body resolves it too.

Currently we set body.ui-mobile-viewport { overflow-x: hidden; }. The viewport class is added to the parent element of the page. Because you wrap them in a form element, the class is not added to the body. Maybe we could change this and always disable horizontal overflow for the body (remove the viewport class from the selector). We would have to see if this has downsides for situations other than yours.

We do want JQM to work well with "rtl". See #5167. However, your issue is not just caused by using "rtl", but using it in combination with a form as wrapper. In general, there might always be edge cases where you have to fix something with custom CSS. I agree that we have to document it if we know about such case. Since this is not only an issue with popups it might be best if we have a central section about "rtl".

I think it's best for now to not make changes in the framework CSS or documentation, but wait the outcome of #5167. I will add a comment there about your issue.

Note: If we decide to make changes in the framework CSS to fix this issue we have to look at the following issues and commit messages.
#2066
ab48625
8089317

@jaspermdegroot jaspermdegroot mentioned this issue Jan 22, 2013
Closed
This was referenced Mar 7, 2013
Closed
Merged
@nschonni nschonni mentioned this issue Mar 7, 2013
Closed
1 task
@asafxrev
Copy link
Author

@uGoMobi just seen your comment (apparently I wasn't getting notifications for this issue).

Thanks for your thorough reply!

@jaspermdegroot
Copy link
Contributor

@asafxrev

For 1.4 I reviewed our CSS to hide elements while keeping them accessible. All the -9999px off sets are gone now, so the issue with dir="rtl" should be resolved.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@jaspermdegroot @asafxrev