Hi, there seems to be an extremely weird issue that I haven't been able to fully reproduce anywhere but on actual iPhone devices:
- for some fonts loaded as woff2
- inside divs that are small enough to wrap the text contents
- if the text color is set to either shades of green (without transparency) or any other color with some transparency
... Then the color will be slightly lighter on page load, and will glitch out between the correct color and some lighter color (or higher transparency?) when you pinch to zoom in/out. Additionally, when you zoom it appears as though parts of the text will be painted in the correct color and some won't be, depending on the zoom level.
Live example here:
https://smezz-test1.bubbleapps.io/version-test/button_test
This should be relatively minimal (all the styling is directly on each element)
in particular: seems to affect some particular google fonts but not others (Lato is broken, Roboto isn't) seems to only be broken when the text overflows and wraps to the next line.
On iOS simulator, the opaque green problem does not reproduce, but other colors such as dark gray, with some transparency will exhibit these symptoms to some extent.
screenshot below: both elements have the exact same style, yet the top one renders correctly and the one below renders with an incorrect hue, and the color glitches when pinch zooming.
This problem affects different browsers in iOS so I suspect this is a webkit problem. I also suspect this has got to do with hardware accelerated rendering, but disabling it in the advanced safari settings did not seem to fix the issue, so I have my doubts.
tested on iPhone 11 Pro Max, iPhone 13, both on iOS 15. tested to some extent on iOS simulator (running iOS15) on MacOS 12.1