0

I've found a TON of posts and questions on mobile width/height. The top two answers are to use media queries, or to use vh/calc(). The other issue I've seen numerously is the mis-understanding of width/height(100%) vs width/height(auto) with the use of margins/padding/borders. What I've run into seems to be unique, but with the flood of mobile issues, I have a feeling somewhere out there is an answer to this already. If you've seen this, please point us to the correct question/answer.

I've created a black glass along with an element to use as an image previewer. The glass and image have width("100%") and height("100%") without any padding, margin, or border. On a computer, it looks perfect. On a mobile device, the dimensions can get thrown off and the background shows through.

If I remove the height("100%") on images that are taller than wide, it resizes to the entire element. If an image is wider than tall, removing the width("100%") causes it to grow appropriately again too. However, this doesn't solve my issue because without a width or height cap at 100%, larger images will overflow.

I first noticed this issue on my cellphone (android) and have had no issue repeating it on Chrome's emulator. I have uploaded a quick recording of what I am seeing to screencast.

It's been suggested that a css rule is leaking from a parent element. Chrome supports the style 'all: initial;' to reset the css. I also manually reset my css with this method. Resetting the styles did not change the issue.

Once again, thank you for taking the time to look at my issue!

Community
  • 1
  • 1
Matt
  • 41
  • 7
  • Check your computed styles for the element, as per your screen cast the effective values are not 100%. Most probably some of parent styles are getting preference over this. – Amit Mahajan Aug 24 '16 at 00:04
  • To give your post a quick shot, I defaulted all css styles with [this](http://stackoverflow.com/questions/15901030/reset-remove-css-styles-for-element-only). It seemed to fix the issue. I'll go through the styles one at a time till I figure out what one is being leaked down and I'll follow up here. Thanks for taking the time to look into this! – Matt Aug 24 '16 at 00:22
  • @amitmah, I went through defaulting all css styles to there initial value. This did not change the outcome. Could an initial value be what is causing the issue? Another tool in Chrome shows how the dimensions are computed. It seems to be using the 100% style. I uploaded a screen shot [here](https://i.imgsafe.org/cf22f6f2ba.ndefined) – Matt Aug 24 '16 at 00:59

0 Answers0