Estoy agregando el estilo de texto del clip a dom-to-image, porque Chrome debe usar el estilo -webkit-background-clip para exponer el efecto de clip de texto, pero el uso de dom-to-image cssText borrará el estilo -webkit-background-clip .

Es un parche que reemplaza el fondo y agrega el clip de fondo.

 const _serializeToString = XMLSerializer.prototype.serializeToString; XMLSerializer.prototype.serializeToString = function (node) { return _serializeToString .call(this, node) .replace( /background-image:/g, '-webkit-background-clip: text; background-image:', // Add the -webkit-background-clip ); };

El problema es que si tengo un fondo que no tiene recorte, no funciona, porque esta solución asume que todo el gradiente de fondo querrá -webkit-background-clip en él.

Esto se representa con texto de clip

 .board-name-gradient { background: -webkit-linear-gradient(#ffffff, #b2b2b2); -webkit-background-clip: text; -webkit-text-fill-color: transparent; opacity: 0.4; overflow: hidden; position: absolute; top: 50px; width: 300px; white-space: nowrap; }

No necesita clip y se sobrescribe (no se renderiza)

 .board-setup::before { content: ""; display: block; height: 100%; position: absolute; top: 0; left: 0; width: 100%; background: linear-gradient(90deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 90%, rgba(255, 255, 255, 0) 100%); mix-blend-mode: overlay; z-index: 3; }

Entonces, debería agregar una condición para verificar si se debe agregar el texto del clip:

 XMLSerializer.prototype.serializeToString = function (node) { const value = _serializeToString.call(this, node); if (does not have clip text) { return value; } return value.replace( /background-image:/g, '-webkit-background-clip: text; background-image:', // Add the -webkit-background-clip ); };

¿Cómo puedo reemplazar el clip de fondo solo si el estilo debe tener el efecto de texto del clip?