Skip to content

Android SDK in-app content block renders blank when HTML contains GIF image #97

Description

@ArsalanSal

Summary

The Bloomreach/Exponea Android SDK in-app content block renders blank or collapses when the HTML creative contains a remote .gif image.

The block is fetched, matched, and reported as shown, but the actual rendered area becomes empty or extremely small.

Environment

  • Platform: Android
  • SDK: Bloomreach/Exponea Android SDK
  • Feature: In-app content blocks
  • Content type: HTML creative
  • Trigger: Remote .gif image inside the HTML

Observed Behavior

When the HTML contains a remote .gif image:

  • The SDK logs that the block was shown.
  • The rendered content is blank or nearly collapsed.
  • The measured height is very small, for example 24px.
  • Replacing/removing the GIF makes the block render normally.

Example logs:

InAppCB: Block <block_id> has been shown
InAppCB: Height update: 24

## Expected Behavior

The in-app content block should render the HTML creative correctly when it contains a GIF image.

If GIF images are not supported, the SDK should either:

- preserve valid MIME information and render supported GIFs correctly, or
- fail gracefully and document that GIF images are unsupported in Android in-app content blocks.

## Actual Behavior

The block is considered shown, but the visible module disappears or renders as blank.

## Potential Root Cause

After inspecting the Android SDK source, the issue appears related to HTML normalization for in-app content blocks.

InAppContentBlockViewController normalizes HTML with offline resource handling enabled:

HtmlNormalizerConfig(
    makeResourcesOffline = true,
    ensureCloseButton = false,
)

During normalization, HtmlNormalizer.makeImageTagsToBeOffline() rewrites image URLs into base64 data URIs:

image.attr("src", asBase64Image(imageSource))

However, asBase64Image() appears to always return a PNG data URI:

return "data:image/png;base64,$result"

This means a GIF URL is transformed into a value like:

<img src="data:image/png;base64,...">

while the actual encoded bytes are still GIF data.

This MIME mismatch appears to cause Android WebView to fail rendering the image correctly. If the creative depends on that image for visible content or intrinsic
height, the whole in-app content block appears blank or collapsed.

## Minimal Reproduction

<!DOCTYPE html>
<html>
  <body style="margin:0; padding:0;">
    <img
      src="https://example.com/banner.gif"
      style="display:block; width:100%;"
    />
  </body>
</html>

## Additional Observation

Rows with transparent backgrounds can make the issue look worse.

Because the SDK WebView background is transparent and the image fails to render, rows that rely on transparent backgrounds plus image content have no visible fallback.
The module then appears completely gone.

## Suggested Fix

Preserve the original image MIME type when converting image resources to base64 data URIs.

For example:

.gif  -> data:image/gif;base64,...
.png  -> data:image/png;base64,...
.jpg  -> data:image/jpeg;base64,...
.jpeg -> data:image/jpeg;base64,...
.webp -> data:image/webp;base64,...

## Workaround

Avoid .gif images in Android in-app content block HTML creatives.

Use static images such as .png, .jpg, or .webp, and ensure the HTML has explicit visible content or minimum height so the block does not collapse when an image fails to
render.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Fields

    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions