Summary

When inserting HTML page elements into the "At end of the body" field of the Custom HTML admin page, the footer image is duplicated.

Environment

• Reproduced in Chrome 65.0.3325.181 and Firefox 59.0.2

Steps to Reproduce

1. Go to the Custom HTML admin page
2. Insert an HTML element onto the page in the At end of the BODY field:

   <h1>test</h1>
   

Expected Results

A header with the word "test" will appear at the end of the page with no other elements after it.

Actual Results

The header is shown, and the footer "Atlassian" logo is duplicated below it.

Notes

This happens for adding any HTML page element (even just plain text with no html tags), but does not appear to affect scripts entirely encapsulated in a <script> tag.

Workaround

Remove duplicate image (preferred)

You can remove the duplicate logo with the following code. This workaround most directly resolves the root cause:

<script type="text/javascript"> $("#footer-logo").hide();</script>
Add whatever you want to show in the footer here.
You should see all this text, and only one logo.

Scripts

If the entire custom HTML is a script, be sure all the code is inside <script></script> tags.

HTML Elements

If you do have HTML elements to add to the footer, this issue will not happen if the content is added through a script. You can use the following templates to add HTML elements to the end of the page with jQuery (note: these have the possibility of having unintended visual side-effects, and are suggested here only if the "Remove duplicate image" workaround does not work for you):

<script>
  const textToAdd = `
    <p>Here is some HTML that will show at the bottom of the page.</p>
    <p>No duplicate footer here!</p>
  `;
  $('#footer-logo').prepend(textToAdd);
</script>

 
<script type="text/javascript"> 
  let textToAdd = ` 
    <p>Here is some HTML that will show at the bottom of the page.</p> 
    <p>No duplicate footer here!</p> 
  `; 
  $('body').append(textToAdd); 
</script>