Fix gray border on image for alt with no src bug on lightbox (#12379)

* Fix safari gray border bug on lightbox

* Add special case for iOS

* Actually this bug applies to most mobile browsers and desktop safari

* Set image source properly, initialize height width to zero

extensions/amp-lightbox-viewer/0.1/amp-lightbox-viewer.js

@@ -29,6 +29,7 @@ import {toggle, setStyle} from '../../../src/style';
 import {getData, listen} from '../../../src/event-helper';
 import {LightboxManager} from './service/lightbox-manager-impl';
 import {layoutRectFromDomRect} from '../../../src/layout-rect';
+import {elementByTag} from '../../../src/dom';
 import * as st from '../../../src/style';
 import * as tr from '../../../src/transition';
 import {SwipeYRecognizer} from '../../../src/gesture-recognizers';
@@ -220,7 +221,7 @@ export class AmpLightboxViewer extends AMP.BaseElement {
         container.classList.add('i-amphtml-image-lightbox-container');
         const imageViewer = new ImageViewer(this, this.win,
           this.loadPromise.bind(this));
-        imageViewer.init(element);
+        imageViewer.init(element, elementByTag(element, 'img'));
         container.appendChild(imageViewer.getElement());
         slide = container;
         metadata.imageViewer = imageViewer;

src/image-viewer.js

@@ -241,6 +241,13 @@ export class ImageViewer {
       // It will be updated later.
       this.image_.setAttribute('src', sourceImage.src);
     }
+
+    st.setStyles(this.image_, {
+      top: st.px(0),
+      left: st.px(0),
+      width: st.px(0),
+      height: st.px(0),
+    });
   }
 
   /**