Skip to content

Commit 8217b5c

Browse files
adamwathanadamwathan
authored
Declare transform properties with "*" syntax instead of "<transform-function>" (#15179)
Fixes #15144. Weird bug in Safari that breaks 3D transforms when using registered custom properties registered with the "<transform-function>" type: https://bugs.webkit.org/show_bug.cgi?id=283487 Declaring them as just "*" fixes it with no apparent downside since transitioning these 3D transforms still works, and usually transitions/animations are the reason you'd type these properties. Evidence of rotations looking the same in all browsers here: ![image](https://github.com/user-attachments/assets/bcaa6145-e047-4e26-8384-c5599b647cf9) --------- Co-authored-by: Adam Wathan <[email protected]>
1 parent 98359be commit 8217b5c

File tree

3 files changed

+41
-40
lines changed

3 files changed

+41
-40
lines changed

‎CHANGELOG.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
1010
### Fixed
1111

1212
- Ensure `.group` and `.peer` are prefixed when using the `prefix(…)` option ([#15174](https://github.com/tailwindlabs/tailwindcss/pull/15174))
13+
- Ensure 3D transforms render correctly in Safari ([#15179](https://github.com/tailwindlabs/tailwindcss/pull/15179))
1314

1415
## [4.0.0-beta.2] - 2024-11-22
1516

‎packages/tailwindcss/src/utilities.test.ts

Lines changed: 35 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -4467,31 +4467,31 @@ test('rotate-x', async () => {
44674467
}
44684468
44694469
@property --tw-rotate-x {
4470-
syntax: "<transform-function>";
4470+
syntax: "*";
44714471
inherits: false;
44724472
initial-value: rotateX(0);
44734473
}
44744474
44754475
@property --tw-rotate-y {
4476-
syntax: "<transform-function>";
4476+
syntax: "*";
44774477
inherits: false;
44784478
initial-value: rotateY(0);
44794479
}
44804480
44814481
@property --tw-rotate-z {
4482-
syntax: "<transform-function>";
4482+
syntax: "*";
44834483
inherits: false;
44844484
initial-value: rotateZ(0);
44854485
}
44864486
44874487
@property --tw-skew-x {
4488-
syntax: "<transform-function>";
4488+
syntax: "*";
44894489
inherits: false;
44904490
initial-value: skewX(0);
44914491
}
44924492
44934493
@property --tw-skew-y {
4494-
syntax: "<transform-function>";
4494+
syntax: "*";
44954495
inherits: false;
44964496
initial-value: skewY(0);
44974497
}"
@@ -4545,31 +4545,31 @@ test('rotate-y', async () => {
45454545
}
45464546
45474547
@property --tw-rotate-x {
4548-
syntax: "<transform-function>";
4548+
syntax: "*";
45494549
inherits: false;
45504550
initial-value: rotateX(0);
45514551
}
45524552
45534553
@property --tw-rotate-y {
4554-
syntax: "<transform-function>";
4554+
syntax: "*";
45554555
inherits: false;
45564556
initial-value: rotateY(0);
45574557
}
45584558
45594559
@property --tw-rotate-z {
4560-
syntax: "<transform-function>";
4560+
syntax: "*";
45614561
inherits: false;
45624562
initial-value: rotateZ(0);
45634563
}
45644564
45654565
@property --tw-skew-x {
4566-
syntax: "<transform-function>";
4566+
syntax: "*";
45674567
inherits: false;
45684568
initial-value: skewX(0);
45694569
}
45704570
45714571
@property --tw-skew-y {
4572-
syntax: "<transform-function>";
4572+
syntax: "*";
45734573
inherits: false;
45744574
initial-value: skewY(0);
45754575
}"
@@ -4623,31 +4623,31 @@ test('rotate-z', async () => {
46234623
}
46244624
46254625
@property --tw-rotate-x {
4626-
syntax: "<transform-function>";
4626+
syntax: "*";
46274627
inherits: false;
46284628
initial-value: rotateX(0);
46294629
}
46304630
46314631
@property --tw-rotate-y {
4632-
syntax: "<transform-function>";
4632+
syntax: "*";
46334633
inherits: false;
46344634
initial-value: rotateY(0);
46354635
}
46364636
46374637
@property --tw-rotate-z {
4638-
syntax: "<transform-function>";
4638+
syntax: "*";
46394639
inherits: false;
46404640
initial-value: rotateZ(0);
46414641
}
46424642
46434643
@property --tw-skew-x {
4644-
syntax: "<transform-function>";
4644+
syntax: "*";
46454645
inherits: false;
46464646
initial-value: skewX(0);
46474647
}
46484648
46494649
@property --tw-skew-y {
4650-
syntax: "<transform-function>";
4650+
syntax: "*";
46514651
inherits: false;
46524652
initial-value: skewY(0);
46534653
}"
@@ -4698,31 +4698,31 @@ test('skew', async () => {
46984698
}
46994699
47004700
@property --tw-rotate-x {
4701-
syntax: "<transform-function>";
4701+
syntax: "*";
47024702
inherits: false;
47034703
initial-value: rotateX(0);
47044704
}
47054705
47064706
@property --tw-rotate-y {
4707-
syntax: "<transform-function>";
4707+
syntax: "*";
47084708
inherits: false;
47094709
initial-value: rotateY(0);
47104710
}
47114711
47124712
@property --tw-rotate-z {
4713-
syntax: "<transform-function>";
4713+
syntax: "*";
47144714
inherits: false;
47154715
initial-value: rotateZ(0);
47164716
}
47174717
47184718
@property --tw-skew-x {
4719-
syntax: "<transform-function>";
4719+
syntax: "*";
47204720
inherits: false;
47214721
initial-value: skewX(0);
47224722
}
47234723
47244724
@property --tw-skew-y {
4725-
syntax: "<transform-function>";
4725+
syntax: "*";
47264726
inherits: false;
47274727
initial-value: skewY(0);
47284728
}"
@@ -4769,31 +4769,31 @@ test('skew-x', async () => {
47694769
}
47704770
47714771
@property --tw-rotate-x {
4772-
syntax: "<transform-function>";
4772+
syntax: "*";
47734773
inherits: false;
47744774
initial-value: rotateX(0);
47754775
}
47764776
47774777
@property --tw-rotate-y {
4778-
syntax: "<transform-function>";
4778+
syntax: "*";
47794779
inherits: false;
47804780
initial-value: rotateY(0);
47814781
}
47824782
47834783
@property --tw-rotate-z {
4784-
syntax: "<transform-function>";
4784+
syntax: "*";
47854785
inherits: false;
47864786
initial-value: rotateZ(0);
47874787
}
47884788
47894789
@property --tw-skew-x {
4790-
syntax: "<transform-function>";
4790+
syntax: "*";
47914791
inherits: false;
47924792
initial-value: skewX(0);
47934793
}
47944794
47954795
@property --tw-skew-y {
4796-
syntax: "<transform-function>";
4796+
syntax: "*";
47974797
inherits: false;
47984798
initial-value: skewY(0);
47994799
}"
@@ -4840,31 +4840,31 @@ test('skew-y', async () => {
48404840
}
48414841
48424842
@property --tw-rotate-x {
4843-
syntax: "<transform-function>";
4843+
syntax: "*";
48444844
inherits: false;
48454845
initial-value: rotateX(0);
48464846
}
48474847
48484848
@property --tw-rotate-y {
4849-
syntax: "<transform-function>";
4849+
syntax: "*";
48504850
inherits: false;
48514851
initial-value: rotateY(0);
48524852
}
48534853
48544854
@property --tw-rotate-z {
4855-
syntax: "<transform-function>";
4855+
syntax: "*";
48564856
inherits: false;
48574857
initial-value: rotateZ(0);
48584858
}
48594859
48604860
@property --tw-skew-x {
4861-
syntax: "<transform-function>";
4861+
syntax: "*";
48624862
inherits: false;
48634863
initial-value: skewX(0);
48644864
}
48654865
48664866
@property --tw-skew-y {
4867-
syntax: "<transform-function>";
4867+
syntax: "*";
48684868
inherits: false;
48694869
initial-value: skewY(0);
48704870
}"
@@ -5244,31 +5244,31 @@ test('transform', async () => {
52445244
}
52455245
52465246
@property --tw-rotate-x {
5247-
syntax: "<transform-function>";
5247+
syntax: "*";
52485248
inherits: false;
52495249
initial-value: rotateX(0);
52505250
}
52515251
52525252
@property --tw-rotate-y {
5253-
syntax: "<transform-function>";
5253+
syntax: "*";
52545254
inherits: false;
52555255
initial-value: rotateY(0);
52565256
}
52575257
52585258
@property --tw-rotate-z {
5259-
syntax: "<transform-function>";
5259+
syntax: "*";
52605260
inherits: false;
52615261
initial-value: rotateZ(0);
52625262
}
52635263
52645264
@property --tw-skew-x {
5265-
syntax: "<transform-function>";
5265+
syntax: "*";
52665266
inherits: false;
52675267
initial-value: skewX(0);
52685268
}
52695269
52705270
@property --tw-skew-y {
5271-
syntax: "<transform-function>";
5271+
syntax: "*";
52725272
inherits: false;
52735273
initial-value: skewY(0);
52745274
}"

‎packages/tailwindcss/src/utilities.ts

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1317,11 +1317,11 @@ export function createUtilities(theme: Theme) {
13171317

13181318
let transformProperties = () =>
13191319
atRoot([
1320-
property('--tw-rotate-x', 'rotateX(0)', '<transform-function>'),
1321-
property('--tw-rotate-y', 'rotateY(0)', '<transform-function>'),
1322-
property('--tw-rotate-z', 'rotateZ(0)', '<transform-function>'),
1323-
property('--tw-skew-x', 'skewX(0)', '<transform-function>'),
1324-
property('--tw-skew-y', 'skewY(0)', '<transform-function>'),
1320+
property('--tw-rotate-x', 'rotateX(0)'),
1321+
property('--tw-rotate-y', 'rotateY(0)'),
1322+
property('--tw-rotate-z', 'rotateZ(0)'),
1323+
property('--tw-skew-x', 'skewX(0)'),
1324+
property('--tw-skew-y', 'skewY(0)'),
13251325
])
13261326

13271327
for (let axis of ['x', 'y', 'z']) {

0 commit comments

Comments
 (0)