UI front end looks bad in Safari

[lauramorinigo]

The front end in Safari looks really bad, img cards are out of size, and cards are not responsive. The idea of having Global Goals as a PWA is to make it available in every browser.
Preview in Ipad:

Problem:

• Images Webp format is not supported in Safari
• Responsive Size of Cards

[lauramorinigo]

Fixes:
1.1 Test how to debug in Safari @AdaRoseCannon
1.2 Fix Webp with element1.3 Fix css alignment around cards

[AdaRoseCannon]

I'll do an article about Weinre.

[lauramorinigo]

1.1 Debug in Safari

As we are both using Windows OS we were not able to debug in Safari.
First, try https://github.com/google/ios-webkit-debug-proxy but we were not able to get it working.
Second, use Weinre, a web inspector that allows us to debug remotely, therefore, debugging as we were using Safari Web Debugging. Thanks to this we were able to inspect the problems on our website locally in our Windows OS and test it the preview using an Ipad.

1.2 Fix Webp with picture element

Webp format is not supported in Safari yet, use picture element to fallback to JPEG

<picture>
  <source srcset="logo.webp" type="image/webp">
  <img src="logo.png" alt="logo">
</picture>

1.3 Responsive Size Of Cards
Cards were looking really bad, even though images were a problem the main issue was related to the following property in css class element bubble-img-vert instead of using height:100%

  align-self: stretch;

[lauramorinigo]

After reverting images to jpg/png format and add align-self: stretch, a new problem appears with the cards. It seems related to overflow: hidden.

This can be related:
https://stackoverflow.com/questions/3047337/does-overflowhidden-applied-to-body-work-on-iphone-safari

[lauramorinigo]

• Safari Desktop looks ok version 12 macOS Mojave 1280 x 960

• Looks bad Safari Mobile, tested in Iphone 7:

1. Donate directly to the UNDP img is too long, same with learning about the global goals, survey, and covid, all vertical cards. Horizontal cards look great.
2. Developed by the United Nations doesn't show and it's too long