search

brave / brave-browser

Brave browser for Android, iOS, Linux, macOS, Windows.
https://brave.com
Mozilla Public License 2.0
17.82k stars 2.33k forks source link

[iOS] - Remove SKShaper_CoreText usage #38647

Closed Brandon-T closed 5 months ago

Brandon-T commented 5 months ago

Description

Steps to reproduce

  1. Load Brave Wallet QA SVG:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="768" height="768" viewBox="0 0 768 768" version="1.1" fill="none">
        <title>Unstoppable Domains domain</title>
        <style>
          @import url("https://fonts.googleapis.com/css?family=Inter:600,600i");
        </style>
        <defs>
          <filter id="filter0_d_1387_53088" x="0.242188" y="0.0855103" width="218.111" height="206.745" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
          <feFlood flood-opacity="0" result="BackgroundImageFix"/>
          <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
          <feOffset dy="5.97656"/>
          <feGaussianBlur stdDeviation="17.9297"/>
          <feComposite in2="hardAlpha" operator="out"/>
          <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.4 0"/>
          <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1387_53088"/>
          <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_1387_53088" result="shape"/>
          </filter>
          <filter id="dropshadow" height="130%">
          <feGaussianBlur in="SourceAlpha" stdDeviation="9"/>
          <feOffset dx="0" dy="0" result="offsetblur"/>
          <feComponentTransfer>
            <feFuncA type="linear" slope="0.5"/>
          </feComponentTransfer>
          <feMerge>
            <feMergeNode/>
            <feMergeNode in="SourceGraphic"/>
          </feMerge>
        </filter>
        </defs>

        <g transform="translate(0, 0)">

      <g>
      <defs>
      <linearGradient id="paint0_linear_1357_79421" x1="383.5" y1="102" x2="383.5" y2="387" gradientUnits="userSpaceOnUse">
      <stop stop-color="white"/>
      <stop offset="0.419681" stop-color="white" stop-opacity="0.4"/>
      </linearGradient>
      <linearGradient id="paint1_linear_1357_79421" x1="383.5" y1="414" x2="383.5" y2="1116" gradientUnits="userSpaceOnUse">
      <stop stop-color="white"/>
      <stop offset="0.419681" stop-color="white" stop-opacity="0.08"/>
      </linearGradient>
      <clipPath id="clip0_1357_79421">
      <rect width="768" height="768" fill="white"/>
      </clipPath>
      </defs>
      <g clip-path="url(#clip0_1357_79421)">
      <rect width="768" height="768" fill="#0D67FE"/>
      <ellipse cx="383.5" cy="244.5" rx="141.943" ry="142.5" fill="url(#paint0_linear_1357_79421)" fill-opacity="0.2"/>
      <ellipse cx="383.5" cy="765" rx="349.629" ry="351" fill="url(#paint1_linear_1357_79421)" fill-opacity="0.2"/>
      </g>
      </g>

        </g>

        <g transform="translate(8, 8)" filter="url(#filter0_d_1387_53088)">
    <path d="M181 34.7586V84.4483L37 143.172L181 34.7586Z" fill="white" fill-opacity="0.72"/>
    <path d="M181.747 34.7586V33.261L180.551 34.1618L36.5507 142.576L37.2821 143.864L181.282 85.14L181.747 84.9504V84.4483V34.7586Z" stroke="black" stroke-opacity="0.12" stroke-width="1.49414"/>
    <path d="M154 32.5V118.328C154 143.275 133.852 163.5 109 163.5C84.1479 163.5 64 143.275 64 118.328V82.1897L91 67.2828V118.328C91 122.521 92.6594 126.542 95.6131 129.507C98.5668 132.472 102.573 134.138 106.75 134.138C110.927 134.138 114.933 132.472 117.887 129.507C120.841 126.542 122.5 122.521 122.5 118.328V49.8914L154 32.5Z" fill="white"/>
    <path d="M154.747 32.5V31.2342L153.639 31.846L122.139 49.2374L121.753 49.4505V49.8914V118.328C121.753 122.324 120.172 126.155 117.358 128.98C114.544 131.805 110.728 133.391 106.75 133.391C102.772 133.391 98.9561 131.805 96.1423 128.98C93.3284 126.155 91.7471 122.324 91.7471 118.328V67.2828V66.0169L90.6389 66.6287L63.6389 81.5356L63.2529 81.7487V82.1897V118.328C63.2529 143.685 83.7326 164.247 109 164.247C134.267 164.247 154.747 143.685 154.747 118.328V32.5Z" stroke="black" stroke-opacity="0.12" stroke-width="1.49414"/>
    </g>

        <g transform="translate(48, 533)" filter="url(#dropshadow)">
          <text text-anchor="start" x="0" y="0" dy="0" font-size="88" font-family="Inter, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Ubuntu, Helvetica Neue, Oxygen, Cantarell, sans-serif, Arial" font-weight="600" fill="#FFFFFF">
            <tspan font-size="104" text-anchor="start" x="0" dy="104" line-height="104">skia</tspan>
            <tspan font-size="88" text-anchor="start" x="0" dy="88" line-height="88">test</tspan>
          </text>
          <text text-anchor="start" x="0" y="0" dy="0" font-size="88" font-family="Inter, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Ubuntu, Helvetica Neue, Oxygen, Cantarell, sans-serif, Arial" font-weight="600" fill="#FFFFFF">
            <tspan font-size="88" text-anchor="start" x="-22" dy="192" line-height="88">.</tspan>
          </text>
        </g>
    </svg>

Actual result

Expected result

Reproduces how often

Easily reproduced

Brave version

1.65.x

Device/iOS version

Any iPhone

Affected browser versions

Reproducibility

Miscellaneous information

No response

srirambv commented 3 months ago

Verification passed on iPhone 13 with iOS 18.0 Beta running 1.68 (117)

https://github.com/user-attachments/assets/36322dfc-3900-4465-aaa2-38ae00812046