wrapper/tailwindcss
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

Declare transform properties with "*" syntax instead of "<transform-function>" (#15179)

Browse source 
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>
This commit is contained in:
Adam Wathan 2024-11-25 21:20:54 -05:00 • committed by GitHub
parent 98359bea94
commit 8217b5ccce
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 41 additions and 40 deletions
Download patch file Download diff file Expand all files Collapse all files

1
CHANGELOG.md
View file

@ -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

70
packages/tailwindcss/src/utilities.test.ts
View file

@ -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);
}"
@ -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);
}"
@ -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);
}"
@ -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);
}"
@ -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);
}"
@ -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);
}"
@ -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);
}"

10
packages/tailwindcss/src/utilities.ts
View file

@ -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']) {