search

SamsungInternet / globalgoals

MIT License
0 stars 0 forks source link

UI front end looks bad in Safari #32

Open lauramorinigo opened 3 years ago

lauramorinigo commented 3 years ago

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:

ezgif com-gif-maker (2)

Problem:

lauramorinigo commented 3 years ago

Fixes: 1.1 Test how to debug in Safari @AdaRoseCannon 1.2 Fix Webp with element 1.3 Fix css alignment around cards

AdaRoseCannon commented 3 years ago

I'll do an article about Weinre.

lauramorinigo commented 3 years ago

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.

image

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 commented 3 years ago

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. image (1)

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

lauramorinigo commented 3 years ago
  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