110056 2013-02-17 09:48:43 -0800 css3 transform can cause elements to not be rendered on screen 2024-07-01 17:33:43 -0700 1 1 1 Unclassified WebKit CSS 528+ (Nightly build) PC Windows 7 RESOLVED CONFIGURATION CHANGED http://jsfiddle.net/AxkEj/20/ InRadar P2 Normal --- 1 asaf.mazar webkit-unassigned ahmad.saleem792 bfulgham dino karlcow mattwoodrow rniwa simon.fraser webkit-bug-importer zalan oldest_to_newest 835000 0 asaf.mazar 2013-02-17 09:48:43 -0800 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. 835001 1 188767 asaf.mazar 2013-02-17 09:58:04 -0800 Created attachment 188767 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. 835614 2 simon.fraser 2013-02-18 10:38:43 -0800 The testcase is too confusing. Please make a simpler one where the bug reproduces just with a single :hover rule. 836196 3 189043 asaf.mazar 2013-02-19 03:27:16 -0800 Created attachment 189043 as requested , the url links to a simplified test case with reproduction of bug on hover. 836201 4 189045 asaf.mazar 2013-02-19 03:50:31 -0800 Created attachment 189045 added vendor prefixes for firefox and explorer bug is not reproduced in: windows 7 firefox 18.0.1 windows 8 explorer 10 836456 5 simon.fraser 2013-02-19 09:03:04 -0800 Does the test case need all the colored shapes? Does it reproduce with just a single div that changes size? 836494 6 189105 asaf.mazar 2013-02-19 09:49:13 -0800 Created attachment 189105 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 840598 7 189974 asaf.mazar 2013-02-24 06:21:11 -0800 Created attachment 189974 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? 840721 8 simon.fraser 2013-02-24 23:25:48 -0800 .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. 840796 9 asaf.mazar 2013-02-25 01:36:46 -0800 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? 841010 10 simon.fraser 2013-02-25 09:05:59 -0800 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. 841993 11 asaf.mazar 2013-02-26 07:48:21 -0800 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. 842069 12 simon.fraser 2013-02-26 09:11:31 -0800 http://dev.w3.org/csswg/css3-transforms/ 1891019 13 ahmad.saleem792 2022-08-12 15:40:37 -0700 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! 1891020 14 webkit-bug-importer 2022-08-12 15:42:49 -0700 <rdar://problem/98590440> 2043949 15 ahmad.saleem792 2024-07-01 05:33:35 -0700 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'. 188767 2013-02-17 09:58:04 -0800 2013-02-18 10:36:19 -0800 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) url.txt text/plain 28 asaf.mazar aHR0cDovL2pzZmlkZGxlLm5ldC9hQjRENS81Lw== 189043 2013-02-19 03:27:16 -0800 2013-02-24 06:21:11 -0800 as requested , the url links to a simplified test case with reproduction of bug on hover. url.txt text/plain 28 asaf.mazar aHR0cDovL2pzZmlkZGxlLm5ldC9BeGtFai8xNw== 189045 2013-02-19 03:50:31 -0800 2013-02-24 06:21:11 -0800 added vendor prefixes for firefox and explorer url.txt text/plain 29 asaf.mazar aHR0cDovL2pzZmlkZGxlLm5ldC9BeGtFai8yMC8= 189105 2013-02-19 09:49:13 -0800 2013-02-24 06:21:11 -0800 simplified test case with one yellow div containing only 2 rotated divs url.txt text/plain 29 asaf.mazar aHR0cDovL2pzZmlkZGxlLm5ldC9BeGtFai8yOC8= 189974 2013-02-24 06:21:11 -0800 2013-02-24 06:21:11 -0800 further simplification of test case url.txt text/plain 29 asaf.mazar aHR0cDovL2pzZmlkZGxlLm5ldC9BeGtFai8zNS8=