Sometimes one of the navigation arrows disappears on Chrome about slider

[jssor]

What's the browser and os version?

[wooama]

Windows 7 - Chrome Version 35.0.1916.153 m
In IE, Safari and Firefox everything's ok.

[jssor]

I have just updated chrome to 35.0.1916.153 m.
No such problem at my side.

Btw, what's your screen size? And what size of chrome when this happen?

[wooama]

Screen size: 1366 x 768.
The original width of the slider is 1300px, from which it scales down or up.
Strangely enough, it starts hiding the right arrow when window.width >= 1340px;

[jssor]

My screen is maximum 1280x768

Please go through following steps to have a test.

open the web page in chrome, right click on the slider, click 'inspect element' menu item in the context menu, and then find the following 3 elements, and then dynamically change 'overflow' of all the 3 elements to 'visible'. close the inspector and check if the problem is still there.

<div id="slider1_container" style="position: relative; top: 0px; left: 0px; width: 1263px; height: 566.4069230769231px; overflow: hidden;">
    <!-- Loading Screen -->
    <div style="position: absolute; top: 0px; left: 0px; width: 1300px; height: 583px; -webkit-transform-origin: 0px 0px; -webkit-transform: scale(0.9715384615384616);">
        <div style="position: relative; top: 0px; left: 0px; width: 1300px; height: 583px; overflow: visible;">

[wooama]

I did all that, but the problem is still there and the right arrow is showing up only during the transition, then it hides away :

[wooama]

I made some tests in Chrome, adjusting in the inspector the "right" style attribute of the right arrow. Maybe it helps:

[jssor]

Thanks!
I got the problem. It is known as 'chrome scale and overflow problem'.
reference http://stackoverflow.com/questions/16687023/bug-with-transform-scale-and-overflow-hidden-in-chrome

I am going to fix it.

[wooama]

Wow. You're the best! Thanks!

[jssor]

There are 2 ways to fix this,

a. disable hardware acceleration for child sliders

    var nestedSliderOptions = {
            $HWA: false,
            ...
        }
    };

b. add '-webkit-transform: perspective(2000px)' to arrows,

    <span class="jssora05l" style="left: 0px; top: 252px; width: 38px; height: 78px; z-index: 1; -webkit-transform: perspective(2000px);" u="arrowleft"></span>
    <span class="jssora05r" style="top: 252px; width: 38px; height: 78px; right: 0px; z-index: 1; -webkit-transform: perspective(2000px);" u="arrowright"></span>

[ram-you]

Hi,
Neither 'a.' nor 'b.' have solved the problem but my solution did:

var svg_docs = document.getElementsByTagName("svg")
for (var i = 0; i < svg_docs.length; i++)
{ svg_docs[i].parentElement.innerHTML += ''; }