Skip to content

Commit 92282b2

Browse files
committed
[Fiber] Ensure srcset and src are assigned last on img instances (#30340)
Safari has a behavior (bug) where when you consturct an Image in javascript if you set srcset before properties for `sizes` the brwoser will download the largest image size because it starts to load before you communicate the sizes information. https://x.com/OliverJAsh/status/1812408504444989588?t=CVHPqBaUiF5-6DBPGERTDA There are likely other combinations or property order assignment that can cause problems such as setting crossorigin after assigning src or srcset. Conceptually we should withold the src and srcSet from the Image instance until last so all relevant other properties can be assigned before actually initiating any network activity. This is an unforunate amount of code for what is realistically a bug in Browsers but it should allow us to avoid weird regressions depending on prop object order. I didn't change the preload prop order because I don't believe preload links have the same issue (they are not fetched as eagerly I believe). One nice benefit of this change though is the img case can move higher in the switch which is likely optimal given it's a relatively common tag. Previously it was as low as it was because it was part of the void element set so it couldn't be elevated without elevating less common tags --------- Co-authored-by: Jan Kassens <jan@kassens.net> DiffTrain build for [0117239](0117239)
1 parent 153c995 commit 92282b2

34 files changed

+2099
-1799
lines changed

compiled/facebook-www/REVISION

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
79e4f23808435d74eaa4a199ae0093cfc176f583
1+
0117239720b6ea830376f4f8605957ccae8b3735
Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
79e4f23808435d74eaa4a199ae0093cfc176f583
1+
0117239720b6ea830376f4f8605957ccae8b3735

compiled/facebook-www/React-dev.classic.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1998,7 +1998,7 @@ __DEV__ &&
19981998
exports.useTransition = function () {
19991999
return resolveDispatcher().useTransition();
20002000
};
2001-
exports.version = "19.0.0-www-classic-79e4f238-20240713";
2001+
exports.version = "19.0.0-www-classic-01172397-20240716";
20022002
"undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ &&
20032003
"function" ===
20042004
typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop &&

compiled/facebook-www/React-dev.modern.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1978,7 +1978,7 @@ __DEV__ &&
19781978
exports.useTransition = function () {
19791979
return resolveDispatcher().useTransition();
19801980
};
1981-
exports.version = "19.0.0-www-modern-79e4f238-20240713";
1981+
exports.version = "19.0.0-www-modern-01172397-20240716";
19821982
"undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ &&
19831983
"function" ===
19841984
typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop &&

compiled/facebook-www/React-prod.classic.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -669,4 +669,4 @@ exports.useSyncExternalStore = function (
669669
exports.useTransition = function () {
670670
return ReactSharedInternals.H.useTransition();
671671
};
672-
exports.version = "19.0.0-www-classic-79e4f238-20240713";
672+
exports.version = "19.0.0-www-classic-01172397-20240716";

compiled/facebook-www/React-prod.modern.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -669,4 +669,4 @@ exports.useSyncExternalStore = function (
669669
exports.useTransition = function () {
670670
return ReactSharedInternals.H.useTransition();
671671
};
672-
exports.version = "19.0.0-www-modern-79e4f238-20240713";
672+
exports.version = "19.0.0-www-modern-01172397-20240716";

compiled/facebook-www/React-profiling.classic.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -673,7 +673,7 @@ exports.useSyncExternalStore = function (
673673
exports.useTransition = function () {
674674
return ReactSharedInternals.H.useTransition();
675675
};
676-
exports.version = "19.0.0-www-classic-79e4f238-20240713";
676+
exports.version = "19.0.0-www-classic-01172397-20240716";
677677
"undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ &&
678678
"function" ===
679679
typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop &&

compiled/facebook-www/React-profiling.modern.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -673,7 +673,7 @@ exports.useSyncExternalStore = function (
673673
exports.useTransition = function () {
674674
return ReactSharedInternals.H.useTransition();
675675
};
676-
exports.version = "19.0.0-www-modern-79e4f238-20240713";
676+
exports.version = "19.0.0-www-modern-01172397-20240716";
677677
"undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ &&
678678
"function" ===
679679
typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop &&

compiled/facebook-www/ReactART-dev.classic.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17021,14 +17021,14 @@ __DEV__ &&
1702117021
scheduleRoot: scheduleRoot,
1702217022
setRefreshHandler: setRefreshHandler,
1702317023
getCurrentFiber: getCurrentFiberForDevTools,
17024-
reconcilerVersion: "19.0.0-www-classic-79e4f238-20240713"
17024+
reconcilerVersion: "19.0.0-www-classic-01172397-20240716"
1702517025
});
1702617026
})({
1702717027
findFiberByHostInstance: function () {
1702817028
return null;
1702917029
},
1703017030
bundleType: 1,
17031-
version: "19.0.0-www-classic-79e4f238-20240713",
17031+
version: "19.0.0-www-classic-01172397-20240716",
1703217032
rendererPackageName: "react-art"
1703317033
});
1703417034
var ClippingRectangle = TYPES.CLIPPING_RECTANGLE,

compiled/facebook-www/ReactART-dev.modern.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16432,14 +16432,14 @@ __DEV__ &&
1643216432
scheduleRoot: scheduleRoot,
1643316433
setRefreshHandler: setRefreshHandler,
1643416434
getCurrentFiber: getCurrentFiberForDevTools,
16435-
reconcilerVersion: "19.0.0-www-modern-79e4f238-20240713"
16435+
reconcilerVersion: "19.0.0-www-modern-01172397-20240716"
1643616436
});
1643716437
})({
1643816438
findFiberByHostInstance: function () {
1643916439
return null;
1644016440
},
1644116441
bundleType: 1,
16442-
version: "19.0.0-www-modern-79e4f238-20240713",
16442+
version: "19.0.0-www-modern-01172397-20240716",
1644316443
rendererPackageName: "react-art"
1644416444
});
1644516445
var ClippingRectangle = TYPES.CLIPPING_RECTANGLE,

compiled/facebook-www/ReactART-prod.classic.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10753,7 +10753,7 @@ var slice = Array.prototype.slice,
1075310753
return null;
1075410754
},
1075510755
bundleType: 0,
10756-
version: "19.0.0-www-classic-79e4f238-20240713",
10756+
version: "19.0.0-www-classic-01172397-20240716",
1075710757
rendererPackageName: "react-art"
1075810758
};
1075910759
var internals$jscomp$inline_1386 = {
@@ -10784,7 +10784,7 @@ var internals$jscomp$inline_1386 = {
1078410784
scheduleRoot: null,
1078510785
setRefreshHandler: null,
1078610786
getCurrentFiber: null,
10787-
reconcilerVersion: "19.0.0-www-classic-79e4f238-20240713"
10787+
reconcilerVersion: "19.0.0-www-classic-01172397-20240716"
1078810788
};
1078910789
if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) {
1079010790
var hook$jscomp$inline_1387 = __REACT_DEVTOOLS_GLOBAL_HOOK__;

compiled/facebook-www/ReactART-prod.modern.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10202,7 +10202,7 @@ var slice = Array.prototype.slice,
1020210202
return null;
1020310203
},
1020410204
bundleType: 0,
10205-
version: "19.0.0-www-modern-79e4f238-20240713",
10205+
version: "19.0.0-www-modern-01172397-20240716",
1020610206
rendererPackageName: "react-art"
1020710207
};
1020810208
var internals$jscomp$inline_1372 = {
@@ -10233,7 +10233,7 @@ var internals$jscomp$inline_1372 = {
1023310233
scheduleRoot: null,
1023410234
setRefreshHandler: null,
1023510235
getCurrentFiber: null,
10236-
reconcilerVersion: "19.0.0-www-modern-79e4f238-20240713"
10236+
reconcilerVersion: "19.0.0-www-modern-01172397-20240716"
1023710237
};
1023810238
if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) {
1023910239
var hook$jscomp$inline_1373 = __REACT_DEVTOOLS_GLOBAL_HOOK__;

0 commit comments

Comments
 (0)