23015 2013-08-19 22:06:00 +0000 Preserve-3d + backface visibility semantics need to be clarified 2017-01-13 18:04:18 +0000 1 1 1 Unclassified CSS Transforms unspecified PC All RESOLVED MOVED P2 normal --- 1 shawnsingh smfr ayg cmarrin dino dschulze eoconnor smfr public-css-bugzilla oldest_to_newest 92299 0 1387 shawnsingh 2013-08-19 22:06:00 +0000 Created attachment 1387 Test case for Example 2 I have two examples that illustrate questions about preserve-3d and backface visibility. The first example can be found in the chromium bug here: https://code.google.com/p/chromium/issues/detail?id=224618 This developer's page has the following structure: <div with perspective, but NOT preserve-3d> <div for face1 of cube, with backface visibility hidden> <div for face2 of cube, with backface visibility hidden> <div for face3 of cube, with backface visibility hidden> <div for face4 of cube, with backface visibility hidden> <div for face5 of cube, with backface visibility hidden> <div for face6 of cube, with backface visibility hidden> </div> According to spec, because the 6 faces are technically NOT in a 3d rendering context, backface visibility must be checked against each layer's local transform. This is awkward - the transform used to test backface visibility (without perspective) is not the same one that is used to actually display the layers (including perspective). As a result, if things are implemented perfectly to spec, sometimes layers will disappear because to local transform without perspective thinks the back-side of an element is visible. But with perspective, the front-side of the element is actually visible. Some options how we could address this awkwardness: (1) leave the spec as-is, and the developer should actually be using preserve-3d on the perspective container. (2) define that perspective transform creates a 3d rendering context, just the same way that preserve-3d would. (3) make a special case that a perspective transform from a direct parent should be included when testing backface visibility, even when not in a 3d rendering context. The second example is attached. This page illustrates a flip-card scenario when the back side of the card is facing the camera. On current versions of Chrome and Safari, this example actually renders the child element of "front", even though it's back face is visible. Should this be considered a bug in the browsers? I can see two different interpretations of spec: (1) backface-visibility applies only to the element's itself. The child element in this example would test backface visibility using it's own local transform (because it is not in a 3d rendering context), and ignore the backface visibility of its ancestors. In this case, the child element would awkwardly remain visible. (2) Because there is no preserve-3d on the element, it implies that the container element "flattens" its subtree before rendering. In that case, the child element gets hidden too when the parent's backside faces the camera. It seems that Safari and Chrome both behave like #1, but I think it is more intuitive for developers if it behaves like #2. If that seems agreeable, then maybe we want to say something like this in the spec: "If the element specifies preserve-3d, then backface-visibility applies only to the element itself and not its children. If the element does not specific preserve-3d, then it is interpreted that the entire subtree "flattens" to the element, and backface-visibility would be used to determined if all the flattened content (i.e. the entire subtree) should be displayed or not." Thanks in advance for looking at these issues. 93828 1 dschulze 2013-09-25 20:57:40 +0000 (In reply to Shawn Singh from comment #0) > Created attachment 1387 [details] > Test case for Example 2 I think we should create two bug reports to discuss this. > > I have two examples that illustrate questions about preserve-3d and backface > visibility. > > The first example can be found in the chromium bug here: > https://code.google.com/p/chromium/issues/detail?id=224618 > > This developer's page has the following structure: > > <div with perspective, but NOT preserve-3d> > <div for face1 of cube, with backface visibility hidden> > <div for face2 of cube, with backface visibility hidden> > <div for face3 of cube, with backface visibility hidden> > <div for face4 of cube, with backface visibility hidden> > <div for face5 of cube, with backface visibility hidden> > <div for face6 of cube, with backface visibility hidden> > </div> > > According to spec, because the 6 faces are technically NOT in a 3d rendering > context, backface visibility must be checked against each layer's local > transform. This is awkward - the transform used to test backface visibility > (without perspective) is not the same one that is used to actually display > the layers (including perspective). As a result, if things are implemented > perfectly to spec, sometimes layers will disappear because to local > transform without perspective thinks the back-side of an element is visible. > But with perspective, the front-side of the element is actually visible. > > Some options how we could address this awkwardness: > (1) leave the spec as-is, and the developer should actually be using > preserve-3d on the perspective container. > (2) define that perspective transform creates a 3d rendering context, just > the same way that preserve-3d would. > (3) make a special case that a perspective transform from a direct parent > should be included when testing backface visibility, even when not in a 3d > rendering context. > I am creating a test suite that exactly checks the different behaviors across browsers on preserve-3d and flatten. You can find the repository on github under http://adobe-webplatform.github.io/transform-tests/comparison.html The tests still need clean up and quite some corrections. Also, expected results fully depend on the outcome of the discussions. Your example touches the last test cases with blue and yellow. You'll see that the problem is not just related to perspective but the interpretation of 'flatten' on the transform-style property. In fact all tests test edge cases of transform-style with certain other settings like perspective. I encourage you to transform your tests to ref-tests in the format of the CSS WG. See http://wiki.csswg.org/test/reftest That makes it easier to compare results and makes it possible to reuse the tests for spec testing. 128382 2 smfr 2017-01-13 18:04:18 +0000 https://github.com/w3c/csswg-drafts/issues/918 1387 2013-08-19 22:06:00 +0000 2013-08-19 22:06:00 +0000 Test case for Example 2 backface-visibility-flip-card.html text/html 2048 shawnsingh PCFET0NUWVBFIGh0bWw+Cgo8IS0tCiAgIFJlZHVjZWQgdGVzdCBjYXNlIGRlbW9uc3RyYXRpbmcg YSBmbGlwIGNhcmQuCiAgIFdoZW4gdGhlIGNhcmQgaXMgcm90YXRlZCBzbyBpdCdzIGJhY2sgZmFj ZXMgdGhlIGNhbWVyYSwKICAgc2hvdWxkIHRoZSBjaGlsZHJlbiBlbGVtZW50cyBhbHNvIGJlIGNv bnNpZGVyZWQKICAgdG8gYmUgYmFjay1mYWNlIHZpc2libGU/Ci0tPgoKPGh0bWw+CjxoZWFkPgo8 c3R5bGU+CgogIC5wZXJzcGVjdGl2ZSB7CiAgICAgIHdpZHRoOiAyMjBweDsKICAgICAgaGVpZ2h0 OiAzMDBweDsKICAgICAgcG9zaXRpb246IGFic29sdXRlOwogICAgICB0b3A6IDEwMHB4OwogICAg ICBsZWZ0OiAxMDBweDsKCiAgICAgIC13ZWJraXQtcGVyc3BlY3RpdmU6IDEwMDBweDsKICAgICAg cGVyc3BlY3RpdmU6IDEwMDBweDsKICB9CgogIC5mbGlwIHsKICAgICAgaGVpZ2h0OiAzMDBweDsK ICAgICAgd2lkdGg6IDIyMHB4OwogICAgICBwb3NpdGlvbjogYWJzb2x1dGU7CiAgICAgIC13ZWJr aXQtdHJhbnNmb3JtLW9yaWdpbjogMjIwcHggMHB4OwogICAgICAtd2Via2l0LXRyYW5zZm9ybS1z dHlsZTogcHJlc2VydmUtM2Q7CiAgICAgIHRyYW5zZm9ybS1vcmlnaW46IDIyMHB4IDBweDsKICAg ICAgdHJhbnNmb3JtLXN0eWxlOiBwcmVzZXJ2ZS0zZDsKCiAgICAgIC8qIFRyYW5zZm9ybSB0byBz aG93IHRoZSBiYWNrIGZhY2Ugb2YgdGhlIGZsaXAgY2FyZCAqLwogICAgICAtd2Via2l0LXRyYW5z Zm9ybTogbWF0cml4M2QoLTEsIDAsIDAsIDAsIDAsIDEsIDAsIDAsIDAsIDAsIC0xLCAwLCAwLCAw LCAwLCAxKTsgCiAgICAgIHRyYW5zZm9ybTogbWF0cml4M2QoLTEsIDAsIDAsIDAsIDAsIDEsIDAs IDAsIDAsIDAsIC0xLCAwLCAwLCAwLCAwLCAxKTsgCiAgCiAgICAgIC8qIFRyYW5zZm9ybSB0byBz aG93IHRoZSBmcm9udCBmYWNlIG9mIHRoZSBmbGlwIGNhcmQgKi8KICAgICAgLyogLXdlYmtpdC10 cmFuc2Zvcm06IG1hdHJpeCgxLCAwLCAwLCAxLCAwLCAwKTsgKi8KICAgICAgLyogdHJhbnNmb3Jt OiBtYXRyaXgoMSwgMCwgMCwgMSwgMCwgMCk7ICovCiB9CgogIC5mcm9udCB7CiAgICAgIGhlaWdo dDogMzAwcHg7CiAgICAgIHdpZHRoOiAyMjBweDsKICAgICAgcG9zaXRpb246IGFic29sdXRlOwog ICAgICBiYWNrZ3JvdW5kLWNvbG9yOiBsaW1lOwoKICAgICAgLXdlYmtpdC1iYWNrZmFjZS12aXNp YmlsaXR5OiBoaWRkZW47CiAgICAgIGJhY2tmYWNlLXZpc2liaWxpdHk6IGhpZGRlbjsKICB9Cgog IC5iYWNrIHsKICAgICAgaGVpZ2h0OiAzMDBweDsKICAgICAgd2lkdGg6IDIyMHB4OwogICAgICBw b3NpdGlvbjogYWJzb2x1dGU7CiAgICAgIGJhY2tncm91bmQtY29sb3I6IGdyYXk7CgogICAgICAt d2Via2l0LWJhY2tmYWNlLXZpc2liaWxpdHk6IGhpZGRlbjsKICAgICAgLXdlYmtpdC10cmFuc2Zv cm06IG1hdHJpeDNkKC0xLCAwLCAwLCAwLCAwLCAxLCAwLCAwLCAwLCAwLCAtMSwgMCwgMCwgMCwg MCwgMSk7CiAgICAgIGJhY2tmYWNlLXZpc2liaWxpdHk6IGhpZGRlbjsKICAgICAgdHJhbnNmb3Jt OiBtYXRyaXgzZCgtMSwgMCwgMCwgMCwgMCwgMSwgMCwgMCwgMCwgMCwgLTEsIDAsIDAsIDAsIDAs IDEpOwogIH0KCiAgLmlubmVyIHsKICAgICAgcG9zaXRpb246IGFic29sdXRlOwogICAgICB6LWlu ZGV4OiAxOwogIH0KCjwvc3R5bGU+Cgo8L2hlYWQ+Cjxib2R5IG9uY2xpY2s9ImZsaXAoKSI+CiAg CiAgPGRpdiBjbGFzcz0icGVyc3BlY3RpdmUiPgogICAgPGRpdiBpZD0iZmxpcG1lIiBjbGFzcz0i ZmxpcCI+CiAgICAgIDxkaXYgY2xhc3M9ImZyb250Ij4KICAgICAgICA8ZGl2IGNsYXNzPSJpbm5l ciI+IEZST05UIDwhLS0gc2hvdWxkIHRoaXMgYmUgdmlzaWJsZSB3aGVuIGJhY2sgc2lkZSBmYWNl cyBjYW1lcmE/IC0tPgogICAgICAgIDwvZGl2PgogICAgICA8L2Rpdj4KICAgICAgPGRpdiBjbGFz cz0iYmFjayI+IAogICAgICAgIDxkaXYgY2xhc3M9ImlubmVyIj4gQkFDSyAKICAgICAgICA8L2Rp dj4KICAgICAgPC9kaXY+CiAgICA8L2Rpdj4KICA8L2Rpdj4KCjwvYm9keT4KPC9odG1sPgo=