Tiles Web-Part issue in Safari Browser

[patrickabel]

Category

• Question
• Bug
• Enhancement

Expected or Desired Behavior

I would expect that the PnP Tiles web-part would render in three columns in Safari just like it does in Edge, Chrome, etc. Perhaps this is a display: flex issue?

Observed Behavior

When using the Safari web-browser, the Tiles web-part is wrapping one tile to its own line instead of a consistent three-column layout.

Steps to Reproduce

1. Deploy and configure sp-starter-kit
2. View the Tiles web-part in Safari

[LouFarho]

I was able to reproduce this issue in Safari using iOS 11.4 on a iPhone 7

[AHCFMELO]

any update on this? i too am having this problem

[patrickabel]

@LouFarho @AHCFMELO I was able to resolve this with some CSS updates to the solution. Just update your .tilesList class in Tiles.module.scss to the following:

.tilesList { @include ms-Grid-row; /* display: flex; */ display: block; flex-wrap: wrap; }

Changing the display property to block doesn't negatively affect the web-part across Chrome, Edge, Firefox, etc but resolves the Safari issue.

Good Luck!

[eoverfield]

@patrickabel thank you for sharing the fix. I will test this out and add to codebase if that is ok with you. or please make a PR if you have a moment.

[patrickabel]

@eoverfield I've submitted a PR. Thanks!

[eoverfield]

This issue was solved via a merged PR. Closing.