Edit History

I don't use mobile devices for my online gaming all that often (read: pretty much never), but on a whim I went to have a look to see how this site was showing up on it so as to make my designs better.

Lo' and behold, I discovered that all the bending-over-backwards to insure mobile-friendliness is screwing things up hard, at least on Safari.  This is particularly true with images.  Admittedly, my iPad is an older generation one from around 2010, but there's no reason images (and most of the other issues I've spotted) should be behaving this way on it.

Here's one example. The first picture is how it should look like/what it does look like in Chrome on a PC. The second is what Safari is doing on my iPad. Height differences are just due to the size of my monitor vs. the iPad.  And to alleviate claims that it's me being an imbecile with my coding, I took the screen shots from bwatford's Homebrew thread and only added a width limitation on the IMG tags below. They're also links if you want to see the larger version, though there's no real reason for that.

Adding max-height: 100%; max-width: 100%; in whatever container you're using for individual posts (or whatever other CSS you're using to manage image widths), and then stripping out both of those variables with your parser should have what I presume is the intended effect while still allowing people to put in their own custom widths and heights as needed. All with no gross javascript required (nevermind quite a few people disable javascript completely anyway).  Though admittedly I haven't tested it out so I could easily be wrong there.

And yes, sometimes you do want/need to set a different height than the default image, especially when designing a layout for a post and using one image that needs to be adjusted multiple times (such as the old faithful one-pixel transparent image). Not often, sure, but when you need to you really need to.

The whole "wrapping it in javascript and stripping out user-defined height while simultaneously forcing in height: auto; (which, incidentally, is the default behavior of literally every browser since Mosaic and should only be required if you're inexplicably changing height's behavior universally in your stylesheets)" move is just bizarre and far, far, far away more prone to screwing up.  As demonstrated in the above screenshots.  Oh, and it also makes sure they don't disappear when you go to edit a post which, you know, screws up the whole what-you-see-is-what-you-get concept.

I don't use mobile devices for my online gaming all that often (read: pretty much never), but on a whim I went to have a look to see how this site was showing up on it so as to make my designs better.

Lo' and behold, I discovered that all the bending-over-backwards to insure mobile-friendliness is screwing things up hard, at least on Safari.  This is particularly true with images.  Admittedly, my iPad is an older generation one from around 2010, but there's no reason images (and most of the other issues I've spotted) should be behaving this way on it.

Here's one example. The first picture is how it should look like/what it does look like in Chrome on a PC. The second is what Safari is doing on my iPad. Height differences are just due to the size of my monitor vs. the iPad.  And to alleviate claims that it's me being an imbecile with my coding, I took the screen shots from bwatford's Homebrew thread and only added a width limitation on the IMG tags below. They're also links if you want to see the larger version, though there's no real reason for that.

Adding max-height: 100%; max-width: 100%; in whatever container you're using for individual posts (or whatever other CSS you're using to manage image widths), and then stripping out both of those variables with your parser should have what I presume is the intended effect while still allowing people to put in their own custom widths and heights as needed. All with no gross javascript required (nevermind quite a few people disable javascript completely anyway).  Though admittedly I haven't tested it out so I could easily be wrong there.

And yes, sometimes you do want/need to set a different height than the default image, especially when designing a layout for a post and using one image that needs to be adjusted multiple times (such as the old faithful one-pixel transparent image). Not often, sure, but when you need to you really need to.

The whole "wrapping it in javascript and stripping out user-defined height while simultaneously forcing in height: auto; (which, incidentally, is the default behavior of literally every browser since Mosaic and should only be required if you're inexplicably changing height's behavior universally in your stylesheets)" move is just bizarre and far, far, far away more prone to screwing up.  As demonstrated in the above screenshots.