Skip to content

Commit

Permalink
Declare transform properties with "*" syntax instead of "<transform-f…
Browse files Browse the repository at this point in the history 
…unction>" (#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 <4323180+adamwathan@users.noreply.github.com>
  • Loading branch information
@adamwathan
adamwathan and adamwathan authored Nov 26, 2024
1 parent 98359be commit 8217b5c
Show file tree
Hide file tree
Showing 3 changed files with 41 additions and 40 deletions.
1 change: 1 addition & 0 deletions CHANGELOG.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
### Fixed

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

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

Expand Down
70 changes: 35 additions & 35 deletions packages/tailwindcss/src/utilities.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4467,31 +4467,31 @@ test('rotate-x', async () => {
}
@property --tw-rotate-x {
syntax: "<transform-function>";
syntax: "*";
inherits: false;
initial-value: rotateX(0);
}
@property --tw-rotate-y {
syntax: "<transform-function>";
syntax: "*";
inherits: false;
initial-value: rotateY(0);
}
@property --tw-rotate-z {
syntax: "<transform-function>";
syntax: "*";
inherits: false;
initial-value: rotateZ(0);
}
@property --tw-skew-x {
syntax: "<transform-function>";
syntax: "*";
inherits: false;
initial-value: skewX(0);
}
@property --tw-skew-y {
syntax: "<transform-function>";
syntax: "*";
inherits: false;
initial-value: skewY(0);
}"
Expand Down Expand Up @@ -4545,31 +4545,31 @@ test('rotate-y', async () => {
}
@property --tw-rotate-x {
syntax: "<transform-function>";
syntax: "*";
inherits: false;
initial-value: rotateX(0);
}
@property --tw-rotate-y {
syntax: "<transform-function>";
syntax: "*";
inherits: false;
initial-value: rotateY(0);
}
@property --tw-rotate-z {
syntax: "<transform-function>";
syntax: "*";
inherits: false;
initial-value: rotateZ(0);
}
@property --tw-skew-x {
syntax: "<transform-function>";
syntax: "*";
inherits: false;
initial-value: skewX(0);
}
@property --tw-skew-y {
syntax: "<transform-function>";
syntax: "*";
inherits: false;
initial-value: skewY(0);
}"
Expand Down Expand Up @@ -4623,31 +4623,31 @@ test('rotate-z', async () => {
}
@property --tw-rotate-x {
syntax: "<transform-function>";
syntax: "*";
inherits: false;
initial-value: rotateX(0);
}
@property --tw-rotate-y {
syntax: "<transform-function>";
syntax: "*";
inherits: false;
initial-value: rotateY(0);
}
@property --tw-rotate-z {
syntax: "<transform-function>";
syntax: "*";
inherits: false;
initial-value: rotateZ(0);
}
@property --tw-skew-x {
syntax: "<transform-function>";
syntax: "*";
inherits: false;
initial-value: skewX(0);
}
@property --tw-skew-y {
syntax: "<transform-function>";
syntax: "*";
inherits: false;
initial-value: skewY(0);
}"
Expand Down Expand Up @@ -4698,31 +4698,31 @@ test('skew', async () => {
}
@property --tw-rotate-x {
syntax: "<transform-function>";
syntax: "*";
inherits: false;
initial-value: rotateX(0);
}
@property --tw-rotate-y {
syntax: "<transform-function>";
syntax: "*";
inherits: false;
initial-value: rotateY(0);
}
@property --tw-rotate-z {
syntax: "<transform-function>";
syntax: "*";
inherits: false;
initial-value: rotateZ(0);
}
@property --tw-skew-x {
syntax: "<transform-function>";
syntax: "*";
inherits: false;
initial-value: skewX(0);
}
@property --tw-skew-y {
syntax: "<transform-function>";
syntax: "*";
inherits: false;
initial-value: skewY(0);
}"
Expand Down Expand Up @@ -4769,31 +4769,31 @@ test('skew-x', async () => {
}
@property --tw-rotate-x {
syntax: "<transform-function>";
syntax: "*";
inherits: false;
initial-value: rotateX(0);
}
@property --tw-rotate-y {
syntax: "<transform-function>";
syntax: "*";
inherits: false;
initial-value: rotateY(0);
}
@property --tw-rotate-z {
syntax: "<transform-function>";
syntax: "*";
inherits: false;
initial-value: rotateZ(0);
}
@property --tw-skew-x {
syntax: "<transform-function>";
syntax: "*";
inherits: false;
initial-value: skewX(0);
}
@property --tw-skew-y {
syntax: "<transform-function>";
syntax: "*";
inherits: false;
initial-value: skewY(0);
}"
Expand Down Expand Up @@ -4840,31 +4840,31 @@ test('skew-y', async () => {
}
@property --tw-rotate-x {
syntax: "<transform-function>";
syntax: "*";
inherits: false;
initial-value: rotateX(0);
}
@property --tw-rotate-y {
syntax: "<transform-function>";
syntax: "*";
inherits: false;
initial-value: rotateY(0);
}
@property --tw-rotate-z {
syntax: "<transform-function>";
syntax: "*";
inherits: false;
initial-value: rotateZ(0);
}
@property --tw-skew-x {
syntax: "<transform-function>";
syntax: "*";
inherits: false;
initial-value: skewX(0);
}
@property --tw-skew-y {
syntax: "<transform-function>";
syntax: "*";
inherits: false;
initial-value: skewY(0);
}"
Expand Down Expand Up @@ -5244,31 +5244,31 @@ test('transform', async () => {
}
@property --tw-rotate-x {
syntax: "<transform-function>";
syntax: "*";
inherits: false;
initial-value: rotateX(0);
}
@property --tw-rotate-y {
syntax: "<transform-function>";
syntax: "*";
inherits: false;
initial-value: rotateY(0);
}
@property --tw-rotate-z {
syntax: "<transform-function>";
syntax: "*";
inherits: false;
initial-value: rotateZ(0);
}
@property --tw-skew-x {
syntax: "<transform-function>";
syntax: "*";
inherits: false;
initial-value: skewX(0);
}
@property --tw-skew-y {
syntax: "<transform-function>";
syntax: "*";
inherits: false;
initial-value: skewY(0);
}"
Expand Down
10 changes: 5 additions & 5 deletions packages/tailwindcss/src/utilities.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1317,11 +1317,11 @@ export function createUtilities(theme: Theme) {

let transformProperties = () =>
atRoot([
property('--tw-rotate-x', 'rotateX(0)', '<transform-function>'),
property('--tw-rotate-y', 'rotateY(0)', '<transform-function>'),
property('--tw-rotate-z', 'rotateZ(0)', '<transform-function>'),
property('--tw-skew-x', 'skewX(0)', '<transform-function>'),
property('--tw-skew-y', 'skewY(0)', '<transform-function>'),
property('--tw-rotate-x', 'rotateX(0)'),
property('--tw-rotate-y', 'rotateY(0)'),
property('--tw-rotate-z', 'rotateZ(0)'),
property('--tw-skew-x', 'skewX(0)'),
property('--tw-skew-y', 'skewY(0)'),
])

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

0 comments on commit 8217b5c

Please sign in to comment.