Fixed Problem viewing the site [RTL issue with G+1 button]

[jazz_aaf]

Does it happen on every page? If so, it might be indicative of something on the page rather than the language per se.

The easiest thing to do might be to go to a page with no user content on it, like a help page. If it happens there (but not on Chris's site), then, err, yeah... not sure where to go from there.

It happens only on the index page + thread.
I tested it with the responsive design back on and all other pages are being displayed correctly.

 

[Chris D]

@jazz_aaf kindly sent me some login details for his site.

No further forward. But just wanted to better reflect the issue and how pretty random it is.

The HTML and CSS has all loaded, but for some unknown reason, Safari renders it like this.



Various things will make it looks as it should. Rotating the screen. Sometimes moving around the screen. Loading menus e.g. Search as illustrated will make that part appear where before it wasn't visible.

It makes no sense.

 

[Chris D]

Wow.

It was starting us right in the face all along.

There's one small configuration that I don't have on Xen Media Gallery.

The Google+1 button.

It is that which is causing the display issue.

@macara can you please confirm that if you enable Responsive (back to how it was) and you disable the Google +1 button that the site loads correctly?

 

[jazz_aaf]

Wow.

It was starting us right in the face all along.

There's one small configuration that I don't have on Xen Media Gallery.

The Google+1 button.

It is that which is causing the display issue.

Makes sense. The only two pages with a Google+ button are index and thread and they are the only pages with a display issue.

 

[macara]

@macara can you please confirm that if you enable Responsive (back to how it was) and you disable the Google +1 button that the site loads correctly?

@Chris Deeming yes, it loads correctly.

 

[bousaid]

Yes, excellent work chris .. The problem in Google+1 button

 

[Chris D]

So the combination is Google+ and responsive design causes the issue.

Interestingly, and I don't know if this has any bearing or clues on the situation, but occasionally as the page is loading (while responsive and Google+ button is activated) you sometimes briefly see the page zoomed in really far. I say briefly... this is usually so quick you hardly notice it. But a few times I was loading the page, I did briefly recognise this odd zooming.

 

[Moshe1010]

So is it Google+ problem and RTL, or Google+ problem and Arabic language package?

 

[Chris D]

If you could try your language pack with Google+ that'd be interesting.

 

[Moshe1010]

Google plus is enabled on my board since day one and I have no issues whatsoever.
I can give you my XML Language file if you would like to check this issue.

 

[Moshe1010]

OK, I've done some massive testing on my website with both iPhone and iPad, and I CAN reproduce this.
Interesting enough, it makes a white/gray box most of the times around the search box/bar. The website sometimes (completely random) was half gray and half whatever should have been there in the first place.
The google plus button certainly has a role here or even the major cause of this issue since without it everything works great. Thanks for the bug report and debugging this issue.

http://img15.imageshack.us/img15/4292/8dlt.png
http://imageshack.us/a/img24/749/sz44.png

 

[aiman.h.kallaf]

a lot of effort was made on this topic , going through it was like watching crime solving mystery
the steps of investigating the problem were educative

 

[macara]

Hello @Chris Deeming,
Thers is 4 other sites with the same problem you can find it PM.

 

[Mike]

I believe I have a fix for this. You can actually see some scrollbars with the G+ button enabled on a desktop browser, and a flash of a very large one. This comes from them doing some absolute positioning of elements to the left which is find in LTR, but in RTL, it should be to the right. This CSS seems to resolve the scrollbar issue and I expect that it'll sort the iPad/iOS issue, though I'll need to double check.

This CSS can be added to sidebar_share_page.css and share_page.css:

<xen:if is="{$pageIsRtl}">
    /* G+1 bugs in RTL - they absolutely position on the left which makes a scrollbar */
    iframe[id^="oauth2relay"]
    {
        rtl-raw.left: auto !important;
        rtl-raw.right: -100px !important;
    }
   
    #___plusone_0, #___plusone_1, #___plusone_2
    {
        rtl-raw.left: auto !important;
        rtl-raw.right: -10000px !important;
    }
</xen:if>

 

[macara]

Hello @Mike!

It works perfect. Many thanks.