Solved: Power Page not rendering correctly on Safari

Power Page not rendering correctly on Safari

Hi,

I have a Powerpage Portal that is used by external clients to view data on our D365 CRM.

Today someone reported that the Portal isn't rendering correctly on a MacBook with Safari.

Other than IE, I've never seen any issues on any browser. I have run the Portal through a Safari emulator (Browserstack) and it's rendering fine. Now I'm at a loss as to why it didn't load correctly for my client. I've been googling all day and not found a solution; I hope you can help.

I have a landing page with different sections, each with a header, a picture and a List.

I have included two screengrabs. One is from Chrome and it shows a section with a header, an image and a List.
However, on my client's Safari, the List is not there.
As said, I've not been able to re-create this on any other browser not even via a Safari emulator.

Could the issue be something with my client's own browser settings? I don't have a Macbook myself so my ability to test this myself is limited to using Browserstack.

The html code for this section is:

<div class="row sectionBlockLayout" style="display: flex; flex-wrap: wrap; padding: 8px; margin: 0px; min-height: 15px; background: rgb(23, 39, 65);"></div>
<div class="row sectionBlockLayout text-left" style="display: flex; flex-wrap: wrap; padding: 8px; margin: 0px; min-height: auto; background: rgb(222, 222, 222);">
 <div class="container" style="padding: 0px; display: flex; flex-wrap: wrap;">
 <div class="col-md-4 columnBlockLayout" style="flex-grow: 1; display: flex; flex-direction: column; min-width: 300px;">
 <h1 style="color: #2AB3A3;">PAE<b aria-label="Text 05 Press enter to edit" style="position: relative;">05</b></h1><img src="/employerdocumentslive/BusinessAccounts03.jpg?v=1667389941304" alt="" name="BusinessAccounts03.jpg" style="width: 100%; height: 150px; max-width: 100%;">
 </div>
 <div class="col-md-8 columnBlockLayout" style="flex-grow: 1; display: flex; flex-direction: column; min-width: 300px;">
 <h1 style="color: #172741;"><b aria-label="Text PAYMENT Press enter to edit" style="position: relative;">PAYMENT </b>SCHEDULES</h1>{% include 'entity_list' key: 'PAE05_List' %}
 </div>
 </div>
</div>

I hope anyone has experienced the same or similar and can point me in the right direction.
In the meantime I have asked my client if he could install Firefox on his Mac, but that's not a desirable solution.

Many thanks,

Pete.

Categories:

General

Hi @pmrsim

Power Pages is using bootstrap 3 at this stage. Bootstrap 5 is not yet GA. There is a possibility safari might not have the compatibility of all the bootstrap class to be rendering.

The simple way to check is

https://caniuse.com/?search=javascript