iOS iFrame scroll direction incorrect with [dir=rtl] content (Safari & Chrome)

[hkfisherman]

Hello:

We are working for Japanese text for public to read historic-scrolls as education-website during CONVID-19. I've studied some past iFrame's issues, seems 6-years the scrolling ability is gracefully improved, but still an error here.

on iOS devices like iPhone, iPad (Air & Pro@iPadOS13) the iframe cannot handle {dir=rtl} content (static) correctly. once page is initiated, x-scroll direction seems settled in Left-most (should be Right-most), and strangely extended towards right. (should towards Left). (see demo linked below). this is our real-life situation - http://www.sixarts.info/thk_gh

While user is swiping right/left in the iFrame, it will render void and cannot recover. Since we cannot copy the content into the page, we must refer to a library resource, that's why we need to use iFrame here.

This is not reproduced in MacOS (up-to-date) / iPad 2(iOS10?) / PC / Android

To Reproduce

1. Go to http://www.sixarts.info/thk_gh
2. See lower part of the page, iFrame is containing a RTL content <div dir="rtl" id="scroll_container" direction="rtl"> <iframe id="frame_scroll" width="100%" height="95%" frameborder="0" src="http://read.sixarts.info:2202/epubreader/15595/Text/Scroll0001.xhtml"/> </div>
3. Swipe Left / Right in iFrame area
4. See error (all white, cannot recover)

Expected behavior should display as the actual URL in the library

Screenshots problem demo - http://www.sixarts.info/demo/incorrect_in_iOS.mp4

correct behavior - http://www.sixarts.info/demo/ok_in_MacOS.jpg

issue with Smartphone only:

• Device: [iPhone, iPad 2]
• OS: [iOS 12+ / iPadOS 13+]
• Browser [stock browser, safari + chrome in iOS]

Additional context we follow the w3.org standards with vertical writing-modes in our content being framed

[hkfisherman]

@davidjbradshaw sorry, i am new to GitHub, is that I should put this bug here or pull to some other place? Please advise.

[davidjbradshaw]

Strange, just tested it on my iPad. My best guess is that it is an issue with CSS, if you remove all the CSS in the iFrame do you still have the issue?

Sent from my iPhone.

[hkfisherman]

Strange, just tested it on my iPad. My best guess is that it is an issue with CSS, if you remove all the CSS in the iFrame do you still have the issue? -- Sent from my iPhone.

no luck, same issue reproduced without CSS.

a test case clearing CSS in the original library HTML, also no-css for iFrame holding. http://www.sixarts.info/nocss_gh only except a vertical writing mode (as in traditional Japanese publishing) styled in the

of original library HTML

-webkit-writing-mode: vertical-rl;
    writing-mode: vertical-rl;

iFrame is simple

<div dir="rtl" direction="rtl">
       <iframe id="frame_scroll" width="100%" height="95%" frameborder="0" src="http://read.sixarts.info:52013/epubreader/1570/Text/Scroll0001.xhtml"/>
</div>

[davidjbradshaw]

Out of ideas then

On Mon, 6 Jul 2020 at 16:01, hkfisherman [email protected] wrote:

Strange, just tested it on my iPad. My best guess is that it is an issue with CSS, if you remove all the CSS in the iFrame do you still have the issue? -- Sent from my iPhone.

no luck, same issue reproduced without CSS.

a test case clearing CSS in the original library HTML, also no-css for iFrame holding. http://www.sixarts.info/nocss_gh only except a vertical writing mode (as in traditional Japanese publishing) styled in the of original library HTML http://read.sixarts.info:52013/epubreader/1570/Text/Scroll0001.xhtml

-webkit-writing-mode: vertical-rl; writing-mode: vertical-rl;

iFrame is simple

— You are receiving this because you were mentioned.

Reply to this email directly, view it on GitHub https://github.com/davidjbradshaw/iframe-resizer/issues/836#issuecomment-654291877, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAEQOET67JGWH3YPFOPZIP3R2HRMHANCNFSM4OQMQ7CA .

-- Sent from my iPhone.