Skip to main content
cancel
Showing results for 
Search instead for 
Did you mean: 

Get certified in Microsoft Fabric—for free! For a limited time, get a free DP-600 exam voucher to use by the end of 2024. Register now

Reply
ptmuldoon
Resolver I
Resolver I

Iphone shows incorrect image vs Android

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.

android image.jpg

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

iphone 14 image.jpeg

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?

1 ACCEPTED SOLUTION
ptmuldoon
Resolver I
Resolver I

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>

 

 

View solution in original post

2 REPLIES 2
ptmuldoon
Resolver I
Resolver I

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
Community Support
Community Support

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.

Helpful resources

Announcements
November Carousel

Fabric Community Update - November 2024

Find out what's new and trending in the Fabric Community.

Live Sessions with Fabric DB

Be one of the first to start using Fabric Databases

Starting December 3, join live sessions with database experts and the Fabric product team to learn just how easy it is to get started.

Las Vegas 2025

Join us at the Microsoft Fabric Community Conference

March 31 - April 2, 2025, in Las Vegas, Nevada. Use code MSCUST for a $150 discount! Early Bird pricing ends December 9th.

Nov PBI Update Carousel

Power BI Monthly Update - November 2024

Check out the November 2024 Power BI update to learn about new features.