Bug 179659 – CSS text-stroke ignores transforms

• Component: Layout and Rendering
• Status: RESOLVED CONFIGURATION CHANGED

[David Hedley]

In iOS 11 Safari, -webkit-text-stroke widths now ignore any containing transforms, so a 10px text stroke width will be rendered at 10px irrespective of whether the text is within a container with "transform: scale(100)" or "transform: scale(0.01)". This can make text rendering completely unreadable at certain scale factors.

Please look at: http://download.vistair.com/test/html/ipadstrokebug.html on iOS 10 and 11 and you'll see the problem. iOS 10 renders the text correctly and iOS 11 does not.

I am not sure if this an iOS bug or a webkit bug, so I have also filed a bug report with Apple (id #34430418)

[Jon Lee]

<rdar://problem/34430418>

[Simon Fraser (smfr)]

Created attachment 326920 [details]
Testcase

[Simon Fraser (smfr)]

Oddly, this works in WebKit1 but is broken in WebKit2.

[Simon Fraser (smfr)]

This is a bug in a framework below WebKit.

[Simon Fraser (smfr)]

*** Bug 180971 has been marked as a duplicate of this bug. ***

[Tobi Reif]

I just checked in Release 47 (Safari 11.1, WebKit 13605.1.19.1),
it seems this doesn't work yet.

I hope it will get fixed soon 😀

Although the bug is in a framework below WebKit: I hope that this bug ticket will get updated when it works in WebKit/Safari.

[David Hedley]

Update received from Apple this morning:

We believe this issue is resolved in the latest iOS 11.3 beta.

Please test with the latest iOS beta.  If you still have issues, please update your bug report with any relevant logs or information that could help us investigate.

https://developer.apple.com/download/

[Tobi Reif]

It might be fixed on iOS 11.3, but unfortunately I can not confirm that.

iOS:
When I open my test page
https://tobireif.com/non_site_stuff/text-stroke_cut_off_example_for_bug-reports/grid.html
using the Simulator.app in mobile Safari on iOS 11.2 I get the correct stroke width
== I can't reproduce the issue on iOS
== testing on iOS 11.3 (in a simulator) wouldn't help.

MacOS:
It doesn't work on MacOS 10.13.3 (17D47) in the WebKit build 227597 from https://webkit.org/build-archives/ . The strokes are too narrow.

Please also see the screenshot "screenshot_simulator_ios_11_2_macos_10_13.png".

Did anyone test this on a device (not in a simulator) running iOS 11.3 beta?

I hope the issue (including https://bugs.webkit.org/show_bug.cgi?id=180971 ) will soon be fixed in Safari on MacOS (and in Safari on iOS of not already).

Please feel free to copy any of the above text and the screenshot "screenshot_simulator_ios_11_2_macos_10_13.png" to the (Safari?) bug report that might exist at http://bugreport.apple.com .

[Tobi Reif]

Created attachment 332248 [details]
screenshot of https://tobireif.com/non_site_stuff/text-stroke_cut_off_example_for_bug-reports/grid.html in Simulator iOS 11.2 and on MacOS 10.13

[Tobi Reif]

Is there any news regarding the status of this issue on (future) MacOS?

[Jon Lee]

It should be addressed in the latest iOS 11.3 or macOS 10.13.4 beta.

[Tobi Reif]

Thanks!

[Tobi Reif]

Works since the MacOS 10.13.4 update. Thanks!

[David Hedley]

I can confirm also that this is now fixed in iOS 11.3