[julien-deramond]

Spotted in julien-deramond/bootstrap-test-playground#140

.menu sets transform-origin to top start, bottom start, top end and bottom end. transform-origin only accepts physical keywords (left, right, top, bottom, center), so browsers drop all of these declarations. The opening animation (scale(.95) to scale(1)) then grows from the center of the menu instead of from the corner next to the toggle. CSS.supports('transform-origin', 'top start') is false in Chromium, and the computed transform-origin of a .menu is 50% 50% whatever its placement. This swaps the keywords for physical ones.

Closes #43104.

Before	After

Six placements at 640px wide, light theme. Each menu is held at scale(.5) so the origin shows. The motion is only 5%, so in practice the change is subtle. Computed transform-origin read in Chromium: 85px 50px for every placement before, the corner each placement names after.

data-bs-placement holds the placement Floating UI computed, which is physical (bottom-start is left-aligned, bottom-end right-aligned, in LTR and RTL alike), so the keywords follow that attribute and no RTL branch is needed. In scss/_menu.scss, top start becomes top left, bottom start bottom left, top end and bottom end top right and bottom right, and left* placements get top right (the menu sits left of its toggle, so it grows from its right edge). right* placements keep the base top left. left and right without a suffix still use the corner, not the middle of the edge, as the other left* rule did.

@@ -7085,19 +7085,25 @@
     box-shadow: var(--menu-box-shadow);
     opacity: 0;
     transform: scale(0.95);
-    transform-origin: top start;
+    transform-origin: top left;
   }
   .menu[data-bs-placement^=top] {
-    transform-origin: bottom start;
+    transform-origin: bottom left;
+  }
+  .menu[data-bs-placement=bottom] {
+    transform-origin: top center;
+  }
+  .menu[data-bs-placement=top] {
+    transform-origin: bottom center;
   }
   .menu[data-bs-placement=bottom-end] {
-    transform-origin: top end;
+    transform-origin: top right;
   }
   .menu[data-bs-placement=top-end] {
-    transform-origin: bottom end;
+    transform-origin: bottom right;
   }
   .menu[data-bs-placement^=left] {
-    transform-origin: top end;
+    transform-origin: top right;
   }
   @media (prefers-reduced-motion: no-preference) {
     .menu {

I added bottom and top rules with top center and bottom center. Without them a plain bottom or top placement would now grow from the left edge, where it grew from the center before (the declaration was dropped, so it was never in effect). Leaving them out would be one rule fewer. No CSS test covers computed values, so none was added.

Checking https://deploy-preview-43106--twbs-bootstrap.netlify.app//docs/6.0/dist/css/bootstrap.min.css with https://htmlval.com/check.php now reports no error:

🤖 Generated with Claude Code