@blockspoon/cert-badge-renderer 1.0.49 → 1.0.50

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -206,9 +206,13 @@ async function generateAchievementHTML(achievementInfo, options = {}) {
206
206
  left: ${element.x}px;
207
207
  width: ${element.width}px;
208
208
  height: ${element.height}px;
209
+ isolation: isolate;
209
210
  display: flex;
210
211
  align-items: center;
211
212
  justify-content: center;
213
+ will-change: transform, contents;
214
+ transform: translateZ(0);
215
+ backface-visibility: hidden;
212
216
  `;
213
217
  html += `<div style="${optimizedStyles}">`;
214
218
  const svgString = template.Component({
@@ -206,9 +206,13 @@ async function generateAchievementHTML(achievementInfo, options = {}) {
206
206
  left: ${element.x}px;
207
207
  width: ${element.width}px;
208
208
  height: ${element.height}px;
209
+ isolation: isolate;
209
210
  display: flex;
210
211
  align-items: center;
211
212
  justify-content: center;
213
+ will-change: transform, contents;
214
+ transform: translateZ(0);
215
+ backface-visibility: hidden;
212
216
  `;
213
217
  html += `<div style="${optimizedStyles}">`;
214
218
  const svgString = template.Component({
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@blockspoon/cert-badge-renderer",
3
- "version": "1.0.49",
3
+ "version": "1.0.50",
4
4
  "description": "Render certificate and badge designs from Kolleges achievement data into HTML, PNG, or Base64.",
5
5
  "main": "./dist/esm/index.js",
6
6
  "exports": {
@@ -259,9 +259,13 @@ export async function generateAchievementHTML(
259
259
  left: ${element.x}px;
260
260
  width: ${element.width}px;
261
261
  height: ${element.height}px;
262
+ isolation: isolate;
262
263
  display: flex;
263
264
  align-items: center;
264
265
  justify-content: center;
266
+ will-change: transform, contents;
267
+ transform: translateZ(0);
268
+ backface-visibility: hidden;
265
269
  `;
266
270
 
267
271
  html += `<div style="${optimizedStyles}">`;