webkit - Javascript positioning not working in Chrome or Safari -

I have to create a script when javascript is centered in an image window, while the window is aimed at which of the image being smaller than It transports the image to the left by the difference between the width of the image and the width of the window so that the center of the image is always the center of the screen. When the window is not shorter than the image, then this offset is set to the left zero and it works perfectly, if I am in IE or Firefox on the WebKit Browser, it never goes to zero, which is Float: right when the window is much wider than the image. Here's the code:

  setTimeout (slide image wide, 1); Work in a slideImageWidth () {var slideWidth = window.getComputedStyle (document.getElementById ("Slide Image")). Width, windowWidth = window.innerWidth, slide = document.getElementById ("slide image"), slideWidth = window.getComputedStyle (slide) .width; If (windowWidth & lt; (slideWidth.replace ("pixels", "") +1) & amp; amp; slide.style.display == "none") {slide.style.left = ((( (-slideWidth. Replace ("px", "") + window height)) / 2) + "px"); } And {slide.style.left = 0; SetTimeout (Slide ImageJust, 1); };  

If I tried to insert slide.style.left = 0 before and just loop it in the next millisecond, but it was not working either I have also tried both appointments with it:

  slide.style.left = "0px"; Slide.style.left = 0 + "px"; Slide.style.left = "0" + "px"; Slide.style.left = 0px;  

None of these work in Chrome or Safari, but all but the last which works in Firefox and IE.

When I have the alert (slide style left) when windows are wider than image, then in Chrome and Safari Firefox and IE get positive values ​​in contrast to 0 Is, which tells me that 0 value slide.style.left . However, I know that I can modify slide.style.left because it is still based on the equation.

Why does this code work with WebKit browsers, and how can I fix this?

First of all, I think things are accidental typo:

1) Your code shows some references called "Slide 1 Width", which is not defined anywhere. 2) Your code shows some references known as "Slide 1", which is not defined anywhere. 3) You do not have the correct number of close brackets, and the last bracket is not necessarily a semicolon after this

Second, the most obvious error is not the reason for your specific problem:

  (slideWidth.replace ("px", "") + 1)  

This expression is not what you want. If the slidewidth is "440px", then replace () calls you "440", and ("440" + 1) string is "4441". I do not think you mean to do it here.

Third, and finally, what I believe is the reason for the actual bug that you are asking: time if you open the Dev tool and manually open the Slideshow on a wide window , After loading and failing to fail yourself, the image will actually jump even on the chrome, even if it does not do this on the page load? Here:

  window.getComputedStyle (slides) .width  

Expresses that "0px" is correct when the page is first loaded. If you wait until the image is loaded, you will be able to get a real width for it, in this situation you can do the calculation you want. (Or, perhaps, you can set the width by styling yourself.) It seems that the image is loading and flowing before running the IE script, whereas Chrome is not there.