Iphone shows incorrect image vs Android

[ptmuldoon]

I have a pbix on our Power BI Service with multiple reports all set with mobile views.    I have primarily always used android phones, and just learned today that those users with iphones are seeing an 'arrow' image showing the wrong image.

On the Android app/phones, this is what I see for varous reports.   Both a Home Icon, and then Left and Right Arrows.

This is correct on android phones.

 

But now that same report on the Iphone is showing incorrectly, and is its showing the Right arrow in both places?

 

I know that in a PC web browser, the reports and icons all look correct, but do not have a mac to check with.   I will hopefully give it a try on an ipad with a web browser later tonight

Would anyone have any idea why ios/iphone is giving the wrong image for the left arrow?

[ptmuldoon · Accepted solution]

I was able do some digging and searching this morning, and I found that the issue appears due to a 'bug' in IOS platforms and the ability to render an SVG vector image that uses the transform property.

And I was not able to figure out how to alter the transform to make it work with IOS.  There's various posts on the web on some work arounds, but I could not get them to work with the SVG icons I was using.    But I was able to swap out my original SVG icons for those that did not contain the transform (actually just replaced the SVG in the 'zip' version of the file), and then the images showed correctly.

If anyone is curious, below is the code of the original SVG icon I was using.  This will produce a left facing arrowing in android and PC, but the transform property gets ignored by IOS.

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<!-- Uploaded to: SVG Repo, www.svgrepo.com, Transformed by: SVG Repo Mixer Tools -->
<svg fill="#FF0000" height="800px" width="800px" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 297.5 297.5" xml:space="preserve" transform="rotate(180)" >
	  
<g id="SVGRepo_bgCarrier" stroke-width="0"/>

<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/>

<g id="SVGRepo_iconCarrier"> <polygon points="297.5,148.25 148,33.25 148,100.25 0,100.25 0,199.25 148,199.25 148,264.25 "/> </g>

</svg>

[v-yangliu-msft]

Hi  @ptmuldoon ,

Make sure that both the Power BI app and the iPhone's operating system are up to date.

Can you share some details about this issue? (e.g.  system version, Power BI mobile app version)

Best Regards,

Liu Yang

If this post helps, then please consider Accept it as the solution to help the other members find it more quickly.