Visible Character in iOS Safari
daniele-pelagatti opened this issue · comments
This particular UTF Character (HEX \xe2\x81\xa4 or E281A4, HTML Entity ⁤) renders as a ? or a square character (depending on the font) in iOS Safari HTML page.
Tested in iPadOS 13.5.1 with Safari.
I tried to do a minimum reproducibility test and the best I could do was this https://codepen.io/daniele-pelagatti/pen/ExPbEYO in the HTML Tab, if you open it in iOS it should show the caracter. It doesn't show in the result windows through for some reason.
I checked this out on my iPhone (iOS 13.5.1) and while it shows the square character in the editor, as you said it doesn't get rendered in the result window.
@daniele-pelagatti could you try reproducing this issue elsewhere, perhaps in another editor or website?
ok, I narrowed down the problem, it wasn't as easy as I initially thought :)
The problem is tied somehow to a specific CSS property: font-variant-ligatures: none;
I updated the pen above https://codepen.io/daniele-pelagatti/pen/ExPbEYO with the reproducibility code.
If this property is used, Safari in iOS somehow renders that character with a box. I also tried with Chrome / Firefox / Edge in Windows and this doesn't happen.
I don't know if this is useful (or even relevant) to the development of this library but I tought it may be worth sharing what I found.
Ah, that's very interesting. Unfortunately, I don't think that's something we can fix as it seems to be... very specific. Thank you so much for pointing this out though!
I agree it's very specific :)
I find it is somehow revelant though: before my last edit, that codepen was showing the square character only in in the HTML tab and not the result.
See the screenshot I attached here, they seem to be using another value for the same CSS property, but it apparetly still leads to the same result:
That means codepen itself applies font-variant-ligatures css styling to its inputs: that CSS property may not be "niche" then, it may be used somewhere else and you cannot know where exactly.
This means that there is a non zero possibility that the square character may appear in some site where the same style is applied globally or in specific areas.
Makes sense. I'll try working out which specific values of font-variant-ligatures cause the problem.
I'm leaning towards retaining the character because it seems the issue occurs in a small region in one popular site (i.e. CodePen) and only on iOS (and maybe only on Safari). However this is just my view and is bound to change based on more evidence collected. We should definitely check out which other popular websites – commonly used and where StegCloak would be useful – are affected by this issue.
I'm tagging @mohanpierce99 so that they can share their views on this. Also, thanks for the detailed information @daniele-pelagatti 👍🏼
Sure, I agree the issue is not relevant enough at the moment to warrant the removal of that character.
If the cloak will fail in a hypotetical future popular-social-media site you'll know what to check first though :)
Glad to be helpful, kudos for your excellent work with this library.