<html>
    <head>
      <base href="https://bugs.webkit.org/">
    </head>
    <body><table border="1" cellspacing="0" cellpadding="8">
        <tr>
          <th>Bug ID</th>
          <td><a class="bz_bug_link 
          bz_status_NEW "
   title="NEW - WebGL Internal error compiling shader with Metal backend."
   href="https://bugs.webkit.org/show_bug.cgi?id=241728">241728</a>
          </td>
        </tr>

        <tr>
          <th>Summary</th>
          <td>WebGL Internal error compiling shader with Metal backend.
          </td>
        </tr>

        <tr>
          <th>Product</th>
          <td>WebKit
          </td>
        </tr>

        <tr>
          <th>Version</th>
          <td>Safari 15
          </td>
        </tr>

        <tr>
          <th>Hardware</th>
          <td>Mac (Intel)
          </td>
        </tr>

        <tr>
          <th>OS</th>
          <td>macOS 12
          </td>
        </tr>

        <tr>
          <th>Status</th>
          <td>NEW
          </td>
        </tr>

        <tr>
          <th>Severity</th>
          <td>Normal
          </td>
        </tr>

        <tr>
          <th>Priority</th>
          <td>P2
          </td>
        </tr>

        <tr>
          <th>Component</th>
          <td>WebGL
          </td>
        </tr>

        <tr>
          <th>Assignee</th>
          <td>webkit-unassigned@lists.webkit.org
          </td>
        </tr>

        <tr>
          <th>Reporter</th>
          <td>cdyk-bugzilla@protonmail.com
          </td>
        </tr>

        <tr>
          <th>CC</th>
          <td>dino@apple.com, kbr@google.com, kkinnunen@apple.com
          </td>
        </tr></table>
      <p>
        <div>
        <pre>On Safari 15 (both MacOs 12 and iOS 15.5), my shaders have started to fail linking with the message "Internal error compiling shader with Metal backend". They work fine on chrome and firefox.

I have reduced one shader to the following repro case (<a href="https://jsfiddle.net/cdyk1/12whq53t/11/">https://jsfiddle.net/cdyk1/12whq53t/11/</a>):

const canvas = document.getElementById("foo");
const gl = canvas.getContext("webgl2")

const vs = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vs, `#version 300 es 
precision highp float; 
in vec3 a_POSITION0; 
void main() 

  gl_Position = vec4(a_POSITION0, 1.0); 

`);
gl.compileShader(vs);
console.log(gl.getShaderInfoLog(vs));

const fs = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fs, `#version 300 es 
precision highp float; 
uniform MaterialParameters { 
  float specularPower; 
}; 

layout(location=0) out vec4 fragColor; 

void main() 

  fragColor = vec4(specularPower != 0.0 ? specularPower : 80.0); 

`
);
gl.compileShader(fs);
console.log(gl.getShaderInfoLog(fs));

const prog = gl.createProgram();
gl.attachShader(prog, vs);
gl.attachShader(prog, fs);
gl.linkProgram(prog);
console.log(gl.getProgramInfoLog(prog));  // Outputs "Internal error compiling shader with Metal backend."</pre>
        </div>
      </p>


      <hr>
      <span>You are receiving this mail because:</span>

      <ul>
          <li>You are the assignee for the bug.</li>
      </ul>
    </body>
</html>