GNU/Linux Firefox image display problem caused by CSS padding

Do not adjust the picture on your television set. There is nothing wrong with the horizontal. That's what the accompanying image is supposed to look like. This image, with this post, but not most of the other images on this site.

Continuing on the theme from my last post of "moving to fewer problems with this web site," I fixed one more problem that has been nagging me ever since starting to use Mozilla Firefox on Ubuntu (and Fedora) last year. I hope posting about this one will help someone else in their searching, since it seems like kind of an obscure problem.

When I started using Firefox on GNU/Linux systems, I noticed that images would often be garbled on web pages. They would be split so that the top half would be displayed below the bottom half. As I scrolled pages up and down, the split would move so that different portions of the image would be swapped, or maybe it wouldn't be garbled at all depending on the rate of scroll. Refreshing the browser would fix the image, until I started scrolling again. This didn't happen for all images.

I thought it was a general flip-flop problem on all web pages for GNU/Linux Firefox. I hadn't ever seen it happen in Windows. I saw this happen on three different machines, so didn't think it was a specific video driver problem. I thought for something this obviously wrong, I'd soon enough see other people complaining about the bug and that there would eventually be a fix out for it. But it kept happening. I'd search once in a while for clues to the problem, but it's kind of a tough one to describe. All the terms I could think of yielded no helpful results. It was disheartening. This seemed like a major flaw with the browser on my shiny new free operating system. Yet I kept procrastinating on asking about it on the various forums because of the anticipated pain of troubleshooting it.

After off-topically mentioning the problem this morning in a comment on Luis Villa's post about free drivers for monitors in portrait mode, I got to thinking about it. It occurred to me that I mainly see this problem on my own blog. Since I look at my own blog so much while writing posts, maybe it just seemed like a general problem. (Especially when it hadn't happened when viewing the blog in Firefox on Windows. It felt natural to attribute the problem to the new environment.)

Some of the pages I had seen in my searching mentioned CSS causes of miscellaneous display problems, so I further got to thinking about how I style my images. Finding a page that reliably demonstrated the problem, I used the Firefox Web Developer Add-On to remove all styles from the page. The images looked fine. No flip-flopping problems.

On a hunch, I commented out the padding and margin attributes for right floating images:

	.imgFloatRightBorder {
		float: right;
		border: 2px solid #AFAFAF;
		background-color: #FFFFFF;
		/* padding: .8ex;
		margin: 0 0 15px 8px; */
		}

And that caused the flip-floppery to go away. Further experimentation narrowed it down to the padding property. I tried 0.5em instead, which didn't help. I theorized that different units of measure for padding and margin might be causing the problem, but that didn't pan out in laboratory tests.

Finally, I tried whole numbers for em and ex units, and that worked okay. For whatever reason, Firefox in GNU/Linux doesn't seem to like fractional em's and ex's for padding. At least when combined with my other settings. (And at least with settings less than one. I didn't try greater than one since I don't want that much padding. I ended up going with 8px.)

Kind of strange. Maybe it's still just a personal problem, but good luck anyway to you future searchers.

In the present, please tell me:

1. Have you noticed the jumbled image problem here when using any browser on any operating system?
2. Did this help you fix a similar problem for your own web pages?