Bug 249044 – In a page that has an element with float and shape-outside, clicking a link crashes the tab

• Component: CSS
• Status: NEW

[Wes Souza]

Created attachment 463970 [details]
Video capture of the issue on iOS 16.2 RC

It seems if an element has CSS float and shape-outside set, long-pressing on links crashes the tab.

If the link opens in a new tab, clicking the link opens the same tab on a new tab.

  <div>Test</div>
  <a href="https://www.example.com/" target="_blank">Link</a>
  <style>
    div {
      float: right;
      shape-outside: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="none"><rect x="0" y="0" width="100" height="100"></rect></svg>');
    }
  </style>

Reproduction: https://codepen.io/wessouza/pen/VwdNbKK

Found by the Svelte team on https://kit.svelte.dev/ (fixed by removing the shape-outside property https://github.com/sveltejs/kit/pull/8028/files)

[Radar WebKit Bug Importer]

<rdar://problem/103194840>

[Karl Dubost]

Created attachment 463996 [details]
crashing test

Thanks a lot for the codepen.

From the discussion in https://github.com/sveltejs/kit/issues/8025
This happened on iOS Safari, but not iOS Firefox.

Let's convert the codepen as an individual test.