react-datocms - npm Package Compare versions

Comparing version 4.0.2 to 4.0.3

dist/cjs/Image/index.js

@@ -134,3 +134,18 @@ "use strict";
     var transition = fadeInDuration > 0 ? "opacity ".concat(fadeInDuration, "ms") : undefined;
-    var placeholder = usePlaceholder && (data.bgColor || data.base64) ? (react_1["default"].createElement("img", { role: "presentation", "aria-hidden": "true", alt: "", src: (_e = data.base64) !== null && _e !== void 0 ? _e : undefined, style: __assign({ backgroundColor: (_f = data.bgColor) !== null && _f !== void 0 ? _f : undefined, objectFit: objectFit, objectPosition: objectPosition }, absolutePositioning) })) : null;
+    var placeholder = usePlaceholder && (data.bgColor || data.base64) ? (react_1["default"].createElement("img", { role: "presentation", "aria-hidden": "true", alt: "", src: (_e = data.base64) !== null && _e !== void 0 ? _e : undefined, style: {
+            backgroundColor: (_f = data.bgColor) !== null && _f !== void 0 ? _f : undefined,
+            objectFit: objectFit,
+            objectPosition: objectPosition,
+            transition: transition,
+            opacity: showImage ? 0 : 1,
+            // During the opacity transition of the placeholder to the definitive version,
+            // hardware acceleration is triggered. This results in the browser trying to render the
+            // placeholder with your GPU, causing blurred edges. Solution: style the placeholder
+            // so the edges overflow the container
+            position: 'absolute',
+            left: '-5%',
+            top: '-5%',
+            width: '110%',
+            height: '110%'
+        } })) : null;
     var width = data.width, aspectRatio = data.aspectRatio;
@@ -155,3 +170,3 @@ var height = (_g = data.height) !== null && _g !== void 0 ? _g : (aspectRatio ? width / aspectRatio : 0);
             regularSource,
-            data.src && (react_1["default"].createElement("img", { src: data.src, alt: (_h = data.alt) !== null && _h !== void 0 ? _h : '', title: (_j = data.title) !== null && _j !== void 0 ? _j : undefined, onLoad: handleLoad, fetchPriority: priority ? 'high' : undefined, className: pictureClassName, style: __assign(__assign(__assign({ opacity: showImage ? 1 : 0, transition: transition }, absolutePositioning), { objectFit: objectFit, objectPosition: objectPosition }), pictureStyle) })))),
+            data.src && (react_1["default"].createElement("img", { src: data.src, alt: (_h = data.alt) !== null && _h !== void 0 ? _h : '', title: (_j = data.title) !== null && _j !== void 0 ? _j : undefined, onLoad: handleLoad, fetchpriority: priority ? 'high' : undefined, className: pictureClassName, style: __assign(__assign(__assign({ opacity: showImage ? 1 : 0, transition: transition }, absolutePositioning), { objectFit: objectFit, objectPosition: objectPosition }), pictureStyle) })))),
         react_1["default"].createElement("noscript", null,
@@ -161,4 +176,4 @@ react_1["default"].createElement("picture", null,
                 regularSource,
-                data.src && (react_1["default"].createElement("img", { src: data.src, alt: (_k = data.alt) !== null && _k !== void 0 ? _k : '', title: (_l = data.title) !== null && _l !== void 0 ? _l : undefined, className: pictureClassName, style: __assign(__assign({}, absolutePositioning), pictureStyle), loading: lazyLoad ? 'lazy' : undefined, fetchPriority: priority ? 'high' : undefined }))))));
+                data.src && (react_1["default"].createElement("img", { src: data.src, alt: (_k = data.alt) !== null && _k !== void 0 ? _k : '', title: (_l = data.title) !== null && _l !== void 0 ? _l : undefined, className: pictureClassName, style: __assign(__assign({}, absolutePositioning), pictureStyle), loading: lazyLoad ? 'lazy' : undefined, fetchpriority: priority ? 'high' : undefined }))))));
 });
 //# sourceMappingURL=index.js.map

dist/esm/Image/index.js

@@ -112,3 +112,18 @@ var __assign = (this && this.__assign) || function () {
     var transition = fadeInDuration > 0 ? "opacity ".concat(fadeInDuration, "ms") : undefined;
-    var placeholder = usePlaceholder && (data.bgColor || data.base64) ? (React.createElement("img", { role: "presentation", "aria-hidden": "true", alt: "", src: (_e = data.base64) !== null && _e !== void 0 ? _e : undefined, style: __assign({ backgroundColor: (_f = data.bgColor) !== null && _f !== void 0 ? _f : undefined, objectFit: objectFit, objectPosition: objectPosition }, absolutePositioning) })) : null;
+    var placeholder = usePlaceholder && (data.bgColor || data.base64) ? (React.createElement("img", { role: "presentation", "aria-hidden": "true", alt: "", src: (_e = data.base64) !== null && _e !== void 0 ? _e : undefined, style: {
+            backgroundColor: (_f = data.bgColor) !== null && _f !== void 0 ? _f : undefined,
+            objectFit: objectFit,
+            objectPosition: objectPosition,
+            transition: transition,
+            opacity: showImage ? 0 : 1,
+            // During the opacity transition of the placeholder to the definitive version,
+            // hardware acceleration is triggered. This results in the browser trying to render the
+            // placeholder with your GPU, causing blurred edges. Solution: style the placeholder
+            // so the edges overflow the container
+            position: 'absolute',
+            left: '-5%',
+            top: '-5%',
+            width: '110%',
+            height: '110%'
+        } })) : null;
     var width = data.width, aspectRatio = data.aspectRatio;
@@ -133,3 +148,3 @@ var height = (_g = data.height) !== null && _g !== void 0 ? _g : (aspectRatio ? width / aspectRatio : 0);
             regularSource,
-            data.src && (React.createElement("img", { src: data.src, alt: (_h = data.alt) !== null && _h !== void 0 ? _h : '', title: (_j = data.title) !== null && _j !== void 0 ? _j : undefined, onLoad: handleLoad, fetchPriority: priority ? 'high' : undefined, className: pictureClassName, style: __assign(__assign(__assign({ opacity: showImage ? 1 : 0, transition: transition }, absolutePositioning), { objectFit: objectFit, objectPosition: objectPosition }), pictureStyle) })))),
+            data.src && (React.createElement("img", { src: data.src, alt: (_h = data.alt) !== null && _h !== void 0 ? _h : '', title: (_j = data.title) !== null && _j !== void 0 ? _j : undefined, onLoad: handleLoad, fetchpriority: priority ? 'high' : undefined, className: pictureClassName, style: __assign(__assign(__assign({ opacity: showImage ? 1 : 0, transition: transition }, absolutePositioning), { objectFit: objectFit, objectPosition: objectPosition }), pictureStyle) })))),
         React.createElement("noscript", null,
@@ -139,4 +154,4 @@ React.createElement("picture", null,
                 regularSource,
-                data.src && (React.createElement("img", { src: data.src, alt: (_k = data.alt) !== null && _k !== void 0 ? _k : '', title: (_l = data.title) !== null && _l !== void 0 ? _l : undefined, className: pictureClassName, style: __assign(__assign({}, absolutePositioning), pictureStyle), loading: lazyLoad ? 'lazy' : undefined, fetchPriority: priority ? 'high' : undefined }))))));
+                data.src && (React.createElement("img", { src: data.src, alt: (_k = data.alt) !== null && _k !== void 0 ? _k : '', title: (_l = data.title) !== null && _l !== void 0 ? _l : undefined, className: pictureClassName, style: __assign(__assign({}, absolutePositioning), pictureStyle), loading: lazyLoad ? 'lazy' : undefined, fetchpriority: priority ? 'high' : undefined }))))));
 });
 //# sourceMappingURL=index.js.map

package.json

 {
   "name": "react-datocms",
-  "version": "4.0.2",
+  "version": "4.0.3",
   "types": "dist/types/index.d.ts",
@@ -5,0 +5,0 @@ "main": "dist/cjs/index.js",

No alert changes

Improved metrics

Total package byte prevSize

342430

increased by0.96%

Lines of code

4869

increased by0.79%

No dependency changes