SVG Attributes for Sizing Doesn’t Work on iPhone

I created a website that uses SVG files imported in img tags. It looked fine. When I tested the mobile version with iPhone, the SVG was bloated. It worked fine with Android with Chrome, Windows with Chrome and Mac with both Safari and Chrome. For some reason, the sizing attributes, with, height, and viewbox, are not working on iPhone Safari.

So, my svg looked like this and I was importing it in an img tag.

I never really figured out the reason why it was happening. In the end, I opted to add css to specify with and height. This works fine for iPhone.

It is important to add both with and height because iPhone Safari doesn’t honour the viewbox attribute, either.

It is a little strange that svg sizing attributes do not work. But, this is the quick win. If you have the same issue, don’t waste too much time on this. Just add with and height. If you have any other solutions, I would like to hear from you!

Front-End
TypeScript: type aliases to check type equality

This post is to analyse how the type equality check by using type aliases proposed by Matt Pocock in his twitter post. These type aliases allow us to elegantly express type equality checks in unit tests. All we need to do is to pass the output and expected types in …

Front-End
Fixing it.only type error in Jest

If you are getting a type error with it.only in Jest, it could be due to incorrect TypeScript typings or incompatible versions of Jest and TypeScript. To resolve this issue, you can try the following steps: Make sure you have the latest versions of Jest and its TypeScript typings installed …

Front-End
yup conditional validation example

Here’s an example of a Yup validation logic where the first input field is optional but, if filled, it must contain only alphabetic characters, and the second input field is required: import * as Yup from “yup”; const validationSchema = Yup.object().shape({ firstField: Yup.string().matches(/^[A-Za-z]*$/, { message: “First field must contain only …