html - Mobile Safari: Image with 100% height not visible in absolute positioned container -

demo:

I use a full wrapped wrapper to center an image in a thumbnail frame. I am using. (Only) on Mobile Safari, the picture will not be displayed. If you inspect the .image-pos container you will see that the height is set at the exact size of its parent, implementing a certain PX height will show the image ... does anyone know how to fix it I know? It's working on any desktop browser ...

HTML :

  & lt; Div class = "wrapper" & gt; & Lt; Div class = "thumb-grid" & gt; & Lt; Div class = "thumb" & gt; & Lt; A href = "#" square = "picture" & gt; & Lt; Div class = "image-pos" & gt; & Lt; Img src = "http://images.weserv.nl/?url=static.living.is/gallery/original/5184f3631034bcdf16bd4d37c341928e.jpg&il&w=600" /> & Lt; / Div & gt; & Lt; / A & gt; & Lt; Div class = "description" & gt; & Lt; H5 & gt; Image title & lt; / H5> & Lt; / Div & gt; & Lt; / Div & gt; & Lt; Div class = "thumb" & gt; & Lt; A href = "#" square = "picture" & gt; & Lt; Div class = "image-pos" & gt; & Lt; Img src = "http://images.weserv.nl/?url=static.living.is/gallery/original/5184f3631034bcdf16bd4d37c341928e.jpg&il&w=600" /> & Lt; / Div & gt; & Lt; / A & gt; & Lt; Div class = "description" & gt; & Lt; H5 & gt; Image title & lt; / H5> & Lt; / Div & gt; & Lt; / Div & gt; & Lt; Div class = "thumb" & gt; & Lt; A href = "#" square = "picture" & gt; & Lt; Div class = "image-pos" & gt; & Lt; Img src = "http://images.weserv.nl/?url=static.living.is/gallery/original/016e551de2f53d58e7f4acd68279e6a1.JPG&il&w=600" /> & Lt; / Div & gt; & Lt; / A & gt; & Lt; Div class = "description" & gt; & Lt; H5 & gt; Image title & lt; / H5> & Lt; / Div & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; / Div & gt;   
  CSS :  
 . Warper {Width: 600px; Margin: 30px auto}}. Thumb-grid {text-align: justify; }. Thumb-Grid: {After content: ''; Display: Inline-block; Width: 100%; } .thumb {status: relative; Display: Inline-block; Width: 31.5%; Height: 0; Padding Top: 29%; Margin-down: 6%; } .image {height: 73%; Hidden flurry; Status: Completed; Text align: center; Top: 0; Width: 100%; Vertical-alignment: top; Display area; Border: 1 px solid # beef; } .image-pos {height: 100%; Left: 50%; Margin-left: -300px; Status: Completed; Text align: center; Width: 600px; } .image-pos img {height: 100%; Maximum-height: 100%; Minimum height: 100%; Max-width: None; Width: Auto; Display: Inline; Border: 0; }. Details {Height: 27%; Status: Completed; Top: 73%; } .details h5 {margin: 0; Padding-top: 5px; }   
 Demo:   
 
 
 to fix any browser Try this link for issues:  
 (download response.min.js)  
  
 After downloading it, add it to your tag:  
  & lt; Script type = "text / javascript" src = "response.min.js" & gt; & Lt; / Script & gt;