iOS 10.3 safari text-align:justify bug for Persian/Arabic content

Question

My website was working and viewing well on every mobile browser of my iPhone before updating to 10.3. From the time I updated my iOS to 10.3, my content page faced an issue:

Content is wrapped in a <div> with CSS property of text-align: justify. My content is in Persian (Farsi).

The problem is: my text content overflows container and when I add a padding to the container to see if it is just overflowed, I found out that it isn't rendering it justified and it's showing it right aligned.

Is there anyone with this issue? Can anyone help?

Update I've added a codepen example: Click Here To Open Codepen

Update As you can see in the following screenshot, the red text is overflowed to the left sidebar:

Answer 1

it's officially a safari 10.1 bug . things worked fine on older safari .

chrome and other browser worked fine in same device .

you can rate this post on apple communities maybe they fix it sooner . safari 10.1 text-align: justify Bug

Answer 2

You can temporarily fix this problem by adding this code to your css:

@media not all and (min-resolution:.001dpcm) { @media {
    .main { 
         text-align: right!important; 
    }
}}