1

I have attempted to create an image preview effect using JavaScript that opens any image clicked in full screen mode. The image itself uses the following code to center itself based upon its size.

CSS | See All | Result

position: fixed;
top: 50%;
left: 50%;

Simplified Javascript | See All | Result

el.style.margin = "-" + el.height / 2 + "px -" + el.width / 2 + "px";

This code functions properly in Firefox, but in Webkit browsers the image is pushed into the top-left corner and has obscure negative margins. Why does this Javascript not work in Webkit browsers? How should I go about fixing this code?

Joshuasm32
  • 23
  • 6
  • Obscure? You have a minus sign right there in your code. – isherwood Aug 13 '14 at 19:12
  • @isherwook Please see this example https://stackoverflow.com/questions/2005954/center-element-with-positionfixed A positive margin should be produced. The code works in CSS, but when using Javascript a problem occurs in Webkit. – Joshuasm32 Aug 13 '14 at 19:14
  • 1
    Ah. Looks like Chrome is using the actual image dimensions, while FF is using your applied CSS dimensions. – isherwood Aug 13 '14 at 19:16
  • Please show more of your JS. – isherwood Aug 13 '14 at 19:22

1 Answers1

1
popupImage.style.margin = "-" + popupImage.clientHeight / 2 
    + "px -" + popupImage.clientWidth / 2 + "px";

See https://stackoverflow.com/a/623174/1264804

Community
  • 1
  • 1
isherwood
  • 58,414
  • 16
  • 114
  • 157