css.properties.justify-content - right does not work on (mobile) safari

[ego-lay-atman-bay]

What information was incorrect, unhelpful, or incomplete?

It said that justify-content: right; works on mobile safari, which while I was making my website, I found out that right does not work.

What did you expect to see?

I expected to see the elements on the right.

Did you test this? If so, how?

while I was making my website. I also went to the docs, and tested it out on mobile.

MDN page report details

• Query: css.properties.justify-content
• MDN URL: https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content
• Report started: 2022-04-20T16:11:44.430Z

[lukewarlow]

I've just tested this myself and it appears to be working fine for me (I only tested the top demo not the bottom one). Could you confirm which version of iOS you're testing with? And perhaps screenshot the behaviour you experience.

[ego-lay-atman-bay]

I've just tested this myself and it appears to be working fine for me. Could you confirm which version of iOS you're testing with? And perhaps screenshot the behaviour you experience.

I am using ios 15.3.1, on ipad. Here's a screenshort

But this works (as well as end)

[lukewarlow]

I've tested on iOS 15.4 and 15.5 and both demos works.

On iOS 14.5 only the first one works so I'm assuming before iOS 15.4 it didn't work with display flex but did with display grid. (The difference between the two demos is the display property)

[lukewarlow]

The data for justify content has a weird split where the values are all under flex but not grid so idk what the correct fix in the data is.

[ego-lay-atman-bay]

I did find that flex-end does indeed work, so I'm using that instead.

[debiru]

I got here after noticing an error in the BCD table for left / right values in the flex context.

The fix in #4604 incorrectly recorded the start / end / left / right support status. The start / end values have since been fixed in #12602.

I have not been able to verify the support status in Safari 15.4 and 15.5 and I have not been able to create a Pull-Req to fix the latest tables. However, I have confirmed that at least Safari 15.3 does not support left / right values.

The "left" and "right" values in the flex context must be modified in the BCD table.

[queengooborg]

I have not been able to confirm a lack of support in Safari on my iPhone or my iPad. I have also been able to confirm that Safari 15.2 and 15.3 on iPhone have support using BrowserStack.