IOS Safari RTL Offset using -webkit-overflow-scroll: touch and -webkit-transform: translate3d (0,0,0)

Question

IOS Safari RTL Offset using -webkit-overflow-scroll: touch and -webkit-transform: translate3d (0,0,0)

I am working on complex management, and we found an error in RTL mode (only) in mobile Safari. Now I have divided the functionality into basic div containers (it seems that jsfiddle does not support RTL mode).

RTL (problem): http://markuskonrad.de/concepts/overflow/overflowissue-rtl.html

LTR (Regular - No Issue): http://markuskonrad.de/concepts/overflow/overflowissue-ltr.html

Verified device:

iPad 2 (iOS 8.2)
iPad Mini (iOS 8.3)
iPad Air (iOS 8.3)
iPhone 4 (iOS 7.1)

Is it possible that there is a Safari Mobile error? I only run into this problem there.

I know that translate3d is a hack for hardware acceleration, and we don’t encounter the problem of rendering scrollContent-Div helper elements. Thus, the only option currently awaits support for the will-change property . Any other ideas?

HTML code

<html dir="rtl" lang="en-US">
<head>
    <link href="Styles/overflowissue.css" rel="stylesheet" />
</head>
<body>
    <div id="scrollContainer" class="mySuiteUiScrollContainer">
        <div id="scrollContent">
            <p>
                123456789_123456789_123456789_123456789_123456789_123456789_123456789_123456789_123456789_123456789_123456789_123456789_123456789_123456789_
                123456789_123456789_123456789_123456789_123456789_123456789_123456789_123456789_123456789_123456789_123456789_123456789_123456789_123456789_
            </p>
        </div>
    </div>
</body>
</html>

CSS code

.mySuiteUiScrollContainer {
    clear: both;
    display: block;
    height: 100%;
    overflow: auto;
    background-color:red;
    -webkit-overflow-scrolling: touch;
}

.mySuiteUiScrollContainer > * {
    clear: both;
    float: none;
    display: inline-block;
    overflow: hidden;
    background-color:blue;
    -webkit-transform: translate3d(0 ,0 ,0);
}