Wide macros on narrow pages appear blurry

I’m not sure if this has been reported somewhere else already, since I don’t believe it is specific to our app.

When inserting an Atlassian Connect app macro in wide or full-width mode on a fixed-width page, the macro appears blurry, both in the editor and on the page. The extent of blurriness depends on the width of the browser window and the width of the Confluence sidebar. While the issue seems like a minor frustration, we have a surprisingly large percentage of our users reporting the issue to us.

The reason is that Confluence uses a transform: translateX(-50%) style on the macro container. From what I could find online, usually browsers round positions to avoid blurriness due to sub-pixel positioning. However, it seems that in this case that mechanism doesn’t work, probably due to the fact that the content is rendered in a (sandboxed, cross-origin) iframe.

I believe to solve the issue, Confluence needs to use a different mechanism (such as a negative margin-left) to position the macro container.

Here is a screenshot of a blurry macro inside the editor (for some reason on the screenshot it appears much less blurry than in reality):

4 Likes

That’s wild.