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.
<rdar://problem/128684099>
It is only reproducible on iOS - I tried on Safari macOS and it seems to work fine.
Created attachment 471517 [details] rendering in safari, firefox, chrome I see the red box in Safari only.
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.
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.
I opened Bug 274744 in case this is not related.