Grow your CSS skills. Land your dream job.

Max-width issue in IE 10 (mobile)

  • # June 24, 2013 at 7:11 pm

    new to this, so thx ahead of time for your patience.

    So I put a quick [page up](http://command-h.com/pie-chart/ “page up”) for practice, and decided to look @ it in IE10 on a Nokia Lumina just out of curiosity and testing, and lo and behold, it’s rendered funny.

    So I pretty much made everything fluid in the code so that it would resize well (percentages all over). I have a canvas which is 640×480 was essentially compressed/crushed in IE10 mobile – but fine on iOS. The canvas element is clearly supported, but I see that IE was ignoring the max-width=100%.

    so off to google I went and I found this:

    @-ms-viewport { width:device-width; zoom:1.0; }

    Although, there was some improvement to the look however, the canvas is still not rendered that well (there is still some image distortion in IE10 mobile), and now the rest of the page is rendering differently than originally (which looked pretty good)

    but i’m more concerned about the canvas element which is not rendering right – the pie chart is still not circular. Again, I realize this is the mobile end of town, so it might be totally different, but was hoping it wasn’t. I haven’t looked at this in IE desktop.

    Any insight?

    thank you!

    # June 25, 2013 at 5:16 pm

    no takers here I gather?

    # June 25, 2013 at 5:22 pm

    I can’t test on IE10 mobile, but try removing the zoom property, it’s not supported there: http://msdn.microsoft.com/en-us/library/ie/hh869615(v=vs.85).aspx

    # June 25, 2013 at 6:25 pm

    thx Croc. I actually tried that and no dice… idk. I tried a few options to no avail. I wonder if it’s just the windows phone I’m using. Anyhow, I’ll keep plugging away, and see what’s happening.

    Someone today told me that this would prob be resolved by fixing the canvas dimentions via some JS, which I’m trying to avoid as I was hoping to not have to go that route.

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".