Summary

There appears to be some layout problems with Confluence native macros on mobile devices. This seems to be specific to Confluence pages that have sectioned layouts or use the

and

macros. Pages that only have text and do not specify out sections/layouts appear normally and in an expected way. Landscape nor Portrait mode appear to have an effect on how the page is rendered. 

Environment

• Confluence 6
• Mobile device
• Non-desktop version of Confluence

Steps to Reproduce

1. Start Confluence
2. Install the Confluence source editor plugin
3. Create a page and add the following markup in the source editor

   <p class="auto-cursor-target">
     <br/>
   </p>
   <ac:structured-macro ac:macro-id="f7409717-9229-4724-8a62-e58ee6d30d43" ac:name="section" ac:schema-version="1">
     <ac:parameter ac:name="border">true</ac:parameter>
     <ac:rich-text-body>
       <p class="auto-cursor-target">
         <br/>
       </p>
       <ac:structured-macro ac:macro-id="94ff1154-afad-4aa0-b0e7-b8a3fea3c93d" ac:name="column" ac:schema-version="1">
         <ac:parameter ac:name="width">25%</ac:parameter>
         <ac:rich-text-body>
           <p class="auto-cursor-target">
             <br/>
           </p>
           <table class="wrapped">
             <colgroup> <col/> </colgroup>
             <tbody>
               <tr>
                 <th>Content A</th>
               </tr>
               <tr>
                 <td>
                   <p class="p1">
                     <span class="s1">
                       <strong>Lorem Ipsum</strong> is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</span>
                   </p>
                 </td>
               </tr>
             </tbody>
           </table>
           <p class="auto-cursor-target">
             <br/>
           </p>
           <table class="wrapped">
             <colgroup> <col/> </colgroup>
             <tbody>
               <tr>
                 <th>Content B</th>
               </tr>
               <tr>
                 <td>
                   <p class="p1">
                     <span class="s1">
                       <strong>Lorem Ipsum</strong> is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</span>
                   </p>
                 </td>
               </tr>
             </tbody>
           </table>
           <p class="auto-cursor-target">
             <br/>
           </p>
         </ac:rich-text-body>
       </ac:structured-macro>
       <p class="auto-cursor-target">
         <br/>
       </p>
       <ac:structured-macro ac:macro-id="5f8e84c9-29a7-4476-989c-d8a6644ff445" ac:name="column" ac:schema-version="1">
         <ac:parameter ac:name="width">25%</ac:parameter>
         <ac:rich-text-body>
           <p class="auto-cursor-target">
             <br/>
           </p>
           <table class="wrapped">
             <colgroup> <col/> </colgroup>
             <tbody>
               <tr>
                 <th>Content C</th>
               </tr>
               <tr>
                 <td>
                   <p class="p1">
                     <span class="s1">
                       <strong>Lorem Ipsum</strong> is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</span>
                   </p>
                 </td>
               </tr>
             </tbody>
           </table>
           <p class="auto-cursor-target">
             <br/>
           </p>
         </ac:rich-text-body>
       </ac:structured-macro>
       <p class="auto-cursor-target">
         <br/>
       </p>
       <ac:structured-macro ac:macro-id="e6f08a47-522f-4bf2-924d-a920ae32602c" ac:name="column" ac:schema-version="1">
         <ac:parameter ac:name="width">25%</ac:parameter>
         <ac:rich-text-body>
           <p class="auto-cursor-target">
             <br/>
           </p>
           <table class="wrapped">
             <colgroup> <col/> </colgroup>
             <tbody>
               <tr>
                 <th>Content D</th>
               </tr>
               <tr>
                 <td>
                   <p class="p1">
                     <span class="s1">
                       <strong>Lorem Ipsum</strong> is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</span>
                   </p>
                 </td>
               </tr>
             </tbody>
           </table>
           <p class="auto-cursor-target">
             <br/>
           </p>
         </ac:rich-text-body>
       </ac:structured-macro>
       <p>
         <br/>
       </p>
       <p>
         <br/>
       </p>
     </ac:rich-text-body>
   </ac:structured-macro>
   <p class="auto-cursor-target">
     <br/>
   </p>
   

1. Visit your site from a mobile device OR using your browser developer tools:
   <confluence-base-URL>/plugins/servlet/mobile#dashboard
2. Navigate to each test page from the main menu

Expected Results

The pages will display relatively similiar to how they appear on the desktop version

Actual Results

The formats of the pages do not look the same and are a bit harder to follow given that they do not respect the layout.

Workaround

Implement custom CSS to work around this issue.

Notes

Testing was conducted on a browser emulator and actual hardware. The results were the same. 

mobileTest2 - this contains a page with sections - one left skinny column and a larger right hand column.