Bug 110056 – css3 transform can cause elements to not be rendered on screen

• Component: CSS
• Status: RESOLVED CONFIGURATION CHANGED

[asaf]

when using css3 transform:rotate combined with transform:scale on elements whose dimensions are several hundred/thousand pixels,
once a threshold of size/number of elements is reached, parts of the page  are no longer rendered on the screen.

simplified test case available here: http://jsfiddle.net/aB4D5/5/
to reproduce bug, increase the value in the numeric pickers - causing the orange container div to grow in size.

[asaf]

Created attachment 188767 [details]
test page includes a large orange div scaled down by 90%. it contains 12 yellow divs. each yellow div has 4 child divs: one for each rotation (x, y, z, none) 

raise the value in left numeric picker to 8000 for guaranteed reproduction of bug.
you may find it useful to fine tune the values and/or add remove yellow divs to test the threshold needed to reproduce the behavior.

[Simon Fraser (smfr)]

The testcase is too confusing. Please make a simpler one where the bug reproduces just with a single :hover rule.

[asaf]

Created attachment 189043 [details]
as requested , the url links to a simplified test case with reproduction of bug on hover.

[asaf]

Created attachment 189045 [details]
added vendor prefixes for firefox and explorer

bug is not reproduced in:
windows 7 firefox 18.0.1 
windows 8 explorer 10

[Simon Fraser (smfr)]

Does the test case need all the colored shapes? Does it reproduce with just a single div that changes size?

[asaf]

Created attachment 189105 [details]
simplified test case with one yellow div containing only 2 rotated divs

note: bug did not reproduce with only one rotated div at increased size:  http://jsfiddle.net/AxkEj/29/
it appears that at least 2 rotated elements of large size are needed to reproduce the bug. it is not clear if transform scale is 
a prerequisite for reproduction of the bug.

related questions on stack overflow: 

http://stackoverflow.com/questions/10601359/chrome-css3-3d-transform-bug
http://stackoverflow.com/questions/14922254/intensive-use-of-css3transform-in-chrome-causes-parts-of-page-to-not-be-rendered

[asaf]

Created attachment 189974 [details]
further simplification of test case

Test results per browser on  full screen view (http://jsfiddle.net/AxkEj/35/embedded/result/)

On mouseover, rotation is applied to violet div on z axis by 45 degrees. 

Safari: 5.1.7: The rotated div disappears.
Chrome latest: entire page except orange and violet divs disappear.
Firefox:  All elements are visible. rotated element is skewed.

full screen : http://jsfiddle.net/AxkEj/35/embedded/result/

The bug is currently in unconfirmed status. What is required for the bug to be considered as confirmed?

[Simon Fraser (smfr)]

.container, which has the rotateX, is intersecting with the body. This behavior isn't very interoperable.

In a recent WebKit nightly I see yet another behavior.

[asaf]

Apparently intersection of elements is indeed a critical factor.
in chrome, screen paint irregularities
are reproduced here: http://jsfiddle.net/AxkEj/37/
but not here:       http://jsfiddle.net/AxkEj/38/

in safari, irregularities occur in both cases.

by using padding to distance the elements from edge of body,
the unexpected grid pattern on screen is not reproduced, but the blue squares(rotate x) still disappear.
http://jsfiddle.net/AxkEj/40/

In firefox, none of the unexpected behaviors are reproduced.

If I understand correctly, this bug is unconfirmed because the current behavior in webkit is an expected behavior. In other words, webkit, by intentional design design does not support the use of transform scale and rotate in the given scenario?

[Simon Fraser (smfr)]

WebKit (specifically Safari) has better intersection support than the other browsers. However, Safari does intersection in some cases where it should not, according to the CSS spec.

[asaf]

Thank you for the clarification. Could you please provide links to the css spec relating to this issue? so far a web search for 'intersection support' and 'css' or 'web browser' yields no relevant information.

[Simon Fraser (smfr)]

http://dev.w3.org/csswg/css3-transforms/

[Ahmad Saleem]

I am able to reproduce this bug using following test case in Safari Technical Preview 151:

Link - https://jsfiddle.net/AxkEj/35/show

On hover, the square does not rotate to show and it only show small bit. While all other browsers (Firefox Nightly 105 and Chrome Canary 106) works fine. I am changing the status to "New". Thanks!

[Radar WebKit Bug Importer]

<rdar://problem/98590440>

[Ahmad Saleem]

Safari 17.5.1 , Chrome Canary 128 and Firefox Nightly 129 are working fine now on below test case:

Link - https://jsfiddle.net/AxkEj/35/

I think we can mark this as 'RESOLVED CONFIGURATION CHANGED'.