Dynamic Connect macros set to “wide” or “full-width” mode can appear blurry.

Issue Summary

The container in which macros are rendered on a Confluence page (e.g. <div class="ak-renderer-extension ak-render-extension-center-align" data-layout="full-width">) has the following two styles applied to center the macro on the page:

margin-left: 50%
transform: translateX(-50%)

When converting percentages to absolute values, browsers will typically round to the nearest pixel value to avoid blurriness; however it seems that in this case (possibly due to the fact that Connect macros are in sandboxed, cross-origin iframes), this rounding is not happening as expected.

by slowing resizing the browser window manually, we could observe the macro going from blurry to sharp and back to blurry again, as the size of the viewport crossed the threshold between being evenly divisible to the nearest pixel value or not.

Further, using the browser’s DevTools to locate the macro container and manually disabling the above CSS styles; the blurriness could no longer be observed at all. See blurry macro video.mp4 for full visual effect.

This is similar to

• CONFCLOUD-72698: Jira roadmap macro gets blurry when using Chrome on Linux

However, that report is for native Confluence macros, and this is for Dynamic Connect macros.

Steps to Reproduce

1. Add a Dynamic Connect macro to a page
2. Set the macro width to either “wide” or “full-width”
3. Publish the Confluence page
4. Depending on the initial size of the browser viewport, the macro may immediately be blurry or may note (depending on whether the container width is aligned evenly to a whole pixel value)
5. Slowly resize the viewport width (essentially in single pixel increments) and observe the macro go from blurry to sharp and back
6. Toggle off the above styles in the browser’s DevTools and observe that the issue is no longer present.

Expected Results

Dynamic Macro displays clearly.

Actual Results

Macros display with blurry text.

Workaround

Currently there is no known workaround for this behavior. A workaround will be added here when available