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.

Bumping an old issue here, but we recently had a customer report this exact issue with one of our macros; and our research into whether this was a known issue has led us here.

As there doesn’t appear to have been any solution posted here, and we were unable to find a corresponding CONFCLOUD or similar ticket on JAC, we have raised an ECOHELP ticket referencing this post in the hope that someone from Atlassian might confirm if this is something that can be addressed.

We will report back here if we receive any response to our ECOHELP ticket.

2 Likes

For tracking: CONFCLOUD-75979

Note that I also provided the following commentary in my ECOHELP ticket (which isn’t in the CONFCLOUD ticket yet) that goes with the screen recording attached to the CONFCLOUD ticket, describing how to reproduce:

Attached is a short screen recording that hopefully demonstrates the problem. (Best to view as large as possible)

Starting with a blank page (not set to full-width), we add an “/open-api” macro and configure it to use the URL https://petstore.swagger.io/v2/swagger.json.

At approximately 0:24s, the macro appears (while still editing the page) in “center” mode, and the text content appears legible and sharp (e.g the “http://swagger.io” hyperlink).

At 0:32s we change the macro to “go wide” mode, and we can immediately see the text becomes slightly blurred.

At 0:40s we change to full width mode and the text again becomes crisp; and then going back to “go wide” mode becomes slightly blurred again.

At 0:50s we publish the page and the rendered text is slightly blurred. We then open the Chrome DevTools, and locate the element that wraps the macro, which is a <div class="ak-renderer-extension">.

At 1:19s, we look at the CSS styles applied to that element, one of which is transform: translateX(-50%);, and we toggle that off and on.

When toggled off, the macro shifts to the right (due to the margin-left: 50% style; but note that the text becomes sharp. When toggled back on again, the text is slightly blurred.

The screen recording did lose a little bit of fidelity when uploaded to ECOHELP, so the blurriness is not quite as evident as what it was when I recorded it, but it at least shows how to reproduce.

Hey @candid @scottohara it’s been a while since this post was published. Sorry, we didn’t look at it earlier.

I am currently trying to reproduce it and for me, macros look the same when it’s rendered in different width modes. I tried Chrome and FireFox on MacOS and wonder if this issue is specific to a particular Browser/OS?

Hi @OleksandrBeztsinnyi, I haven’t encountered a device where the issue doesn’t occur. Could you send a screenshot (PNG) of what it looks like for you?

Sure, @candid. I have attached screenshots taken in Chrome and Firefox (prefixed with “ff”), from both the renderer and editor, to this ticket.
They look the same. Can you suggest how I can reproduce this?

Hey @OleksandrBeztsinnyi, indeed I can also not see the problem in your screenshots.

I tried with the very same macro and for me the issue is still reproducible. When I resize the space sidebar, the issue becomes more or less apparent, but it is always there. I can reproduce it on the latest Chromium on Linux (under Xorg) and on the latest Chrome on Windows 10 and also in Firefox. Both of my computers have a 1920×1080 resolution.

I’m assuming that you are on a Macbook with a Retina display. I can imagine that with a really high resolution the blurriness is not visible, and I don’t know if MacOS took the screenshots in full resolution or scaled down to normal resolution. Maybe it would be worth trying to temporarily set your resolution to 1920×1080 to reproduce the problem. Otherwise maybe try in a Windows/Linux VM. What’s strange though is that we definitely have a lot of Macbook users in our company who have also reported the problem.

Or could it be that the configuration on your instance is different and the issue is already fixed there? Could you check if you can reproduce the issue here: https://cdauth.atlassian.net/wiki/spaces/AA/pages/3028287493/Blurry+macro

@candid, thank you for the additional context.

I do see a difference when I change the resolution to 1920x1200 on MacOS, and disabling the CSS rule transform: translateX(-50%); restores the sharpness of the macro.

Let me proceed with the ticket and escalate it to the team that owns this part.