Bug 274657 – [iOS] Multiple transform with matrix3d() produces different result

• Status: NEW
• Component: CSS

[Krystof T]

Created attachment 471499 [details]
Observe red box being visible on iOS

## What is broken
Element's position after multiple transformations is different then on other browsers.

## How to reproduce:
Open the attached HTML and observe the RED box not being completely overlayed by the green one.

## How it is suppose to look like:
The green box should overlay the red box

## More context
The red box is a background svg was made from a screenshot from Windows Chrome.

This bug perhaps shares something in common with this bug: https://bugs.webkit.org/show_bug.cgi?id=274654

## Reproduced in:
- Safari iOS 17.5.1 (21F90)
- iOS Chrome (125.0.6422.80)
- iOS Firefox (126.1 (41973))

## Works correctly in:
- Android Chrome (125.0.6422.52)
- Android Firefox (124.1.0)
- Windows Chrome (125.0.6422.77)
- Windows Firefox (126.0)

## Unconfirmed:
- Playwright's Webkit (Playwright 1.44.1) -> There it transformed the green box out of the screen.

[Radar WebKit Bug Importer]

<rdar://problem/128684099>

[Ahmad Saleem]

It is only reproducible on iOS - I tried on Safari macOS and it seems to work fine.

[Karl Dubost]

Created attachment 471517 [details]
rendering in safari, firefox, chrome

I see the red box in Safari only.

[Karl Dubost]

At the beginning I thought it was because of scientific notation.
but no that doesn't change anything. but setting every scientific number to 0 doesn't change anything.

There are a lot of things which could be removed here for the purpose of the testcase. This needs to be simpler.

    #A {
      transform-style: preserve-3d;
      width: 733px;
      height: 994px;
      transform: 
    perspective(1199.86px) 
    scale(1) 
    translateZ(1199.86px) 
    matrix3d(-0.427139,    -0.387849, -0.816777, 0, 
              1.66188e-07, -0.903329,  0.428948, 0, 
              0.904186,    -0.183221, -0.385847, 0, 
              0.162948,     0.448783, -4.12311,  1) 
    translate(366.5px, 497px);
      pointer-events: all;
      backface-visibility: visible;
    }

    #B {
      position: absolute;
      pointer-events: all;
      border-radius: 20px;
      user-select: none;
      backface-visibility: visible;
      background-color: rgba(255, 0, 0, 0.333);
      width: 676px;
      height: 512px;
      transform: 
    translate(-50%, -50%) 
    matrix3d(6.54239e-10,  3.83761e-10,  0.0019989,   0, 
            -0.000520044, -0.00193007,   5.28292e-10, 0, 
            -0.00193007,   0.000520044,  5.33518e-10, 0, 
             0.594771,     0.986186,    -0.00800002,  1);
    }


the scale(1) can be removed, pointer-events, etc.
And probably something with simpler numbers.

[Karl Dubost]

Created attachment 471518 [details]
rendering in safari, firefox, chrome

hmm interesting matrix3d has already a weird difference.
https://codepen.io/webcompat/pen/Povbwwa

Not sure why.

[Karl Dubost]

I opened Bug 274744 in case this is not related.