Sapor CSS for image links chokes Safari, so images overlap other elements

Safari chokes on the CSS for animated underlines on linked images, so Safari does not correctly calculate the height of (some) images (sometimes), and block-level elements like <p> or <div> do not expand to the height of the image inside. The images show up, but their containers don’t expand to hold them, so the images spill out of their containers and overlap other elements.

This is what the bug looks like.

This is how that same web page looks when the bug is fixed.

The bug does not happen in Firefox. It happens in Safari on Mac OS and iOS.

The bug only happens to some images, sometimes. It has nothing to do with the image itself — any image may get the bug or not. It seems to me that the more images on the page, the more likely it is to happen.

Sometimes, but not always, refreshing the browser fixes it. Also, resizing the browser window usually fixes it. Using Safari’s web inspector, just clicking a CSS line fixes it. Once you fix the display on the browser side like this, you must empty the cache to see the bug again.

To really fix the bug I had to turn off the animated underline effect on the link <a> which holds the images. Adding this CSS works:

.entry-content a::after,
.entry-content a:hover::after {
    display: none;
}

(I also took the effect off of comment-content a, and comment-respond a, in case anyone posts images there.)

Sapor’s CSS includes the following, which might be an attempt to take the underline effect off of images — but it does not seem to me to be doing anything, since the :after content is not on the <img>, but on the <a>.

.entry-content a img:after {
  display: none;
}

My fix takes the underlines off all links — text as well as images — in the entry-content. I added a simple text-decoration: underline to replace the effect on text in entry-content, and kind of match the effect on other links. This is not as fancy, but the good thing is this underlines a whole text phrase even if the linked text stretches onto a second line.

The animated underline effect does not apply to linked text that goes onto a second line. For my list of recent entries, whose titles are more than one line each in the sidebar widget, I added this CSS to make that underline effect run under the last line of each title:

.widget_recent_entries li a {
	display: inline-block;
}

Here is the site I’m talking about, with my fixes: tressmith.com