164949 2016-11-18 13:27:19 -0800 -webkit-overflow-scrolling: touch completely breaks 3D perspective functionality 2020-06-26 07:36:42 -0700 1 1 1 Unclassified WebKit CSS Safari 10 iPhone / iPad All RESOLVED DUPLICATE 156435 https://bugs.webkit.org/show_bug.cgi?id=83337 https://drafts.csswg.org/css-transforms-2/#grouping-property-values InRadar P2 Major --- 1 aghassemi+bugzilla webkit-unassigned ajuma fred.wang me rwlbuis simon.fraser webkit-bug-importer oldest_to_newest 1252809 0 aghassemi+bugzilla 2016-11-18 13:27:19 -0800 CSS perspective and translateZ provide an efficient way of creating scroll parallax effect however in iOS Safari, adding -webkit-overflow-scrolling: touch; completely breaks all the 3D and perspective effects. Please see http://codepen.io/aghassemi/pen/QGdKbZ for an example. The only difference between the two divs is the value of webkit-overflow-scrolling but notice how perspective is ignored on the second div. 1255372 1 webkit-bug-importer 2016-12-01 12:42:09 -0800 <rdar://problem/29464710> 1387183 2 me 2018-01-09 03:03:47 -0800 Sad to see there has been no activity for over a year for such a visually disruptive bug without a decent workaround. This is the best I could come up with for displaying a scrollable list of cards, stacked on an angle. It looks weird though because there is not a single perspective origin: .container { perspective: 1000px; overflow: auto; -webkit-overflow-scrolling: touch; } .child { transform: rotateY(45deg); } @supports (-webkit-overflow-scrolling: touch) { .container { perspective: none; } .child { transform: perspective(1000px) rotateY(45deg); } } 1426065 3 340960 fred.wang 2018-05-22 01:02:41 -0700 Created attachment 340960 testcase 1426117 4 fred.wang 2018-05-22 05:43:45 -0700 Some preliminary debugging: When webkit-overflow-scrolling is absent RenderLayerCompositor::computeCompositingRequirements will execute if (!willBeComposited && canBeComposited(layer) && requiresCompositingForIndirectReason(layer.renderer(), childState.subtreeIsCompositing, anyDescendantHas3DTransform, indirectCompositingReason)) { layer.setIndirectCompositingReason(indirectCompositingReason); childState.compositingAncestor = &layer; overlapMap.pushCompositingContainer(); addToOverlapMapRecursive(overlapMap, layer); willBeComposited = true; } where requiresCompositingForIndirectReason returns true because of the perspective property on the overflow node and the 3D transform on its descendants. If the overflow node has overflow-scrolling:touch, willBeComposited is however set to true at the top of the function so this conditional is never executed. I'm not yet sure how/whether this is causing the bug, though. 1426135 5 ajuma 2018-05-22 06:53:33 -0700 (In reply to Frédéric Wang (:fredw) from comment #4) > Some preliminary debugging: When webkit-overflow-scrolling is absent > RenderLayerCompositor::computeCompositingRequirements will execute > > if (!willBeComposited && canBeComposited(layer) > && requiresCompositingForIndirectReason(layer.renderer(), > childState.subtreeIsCompositing, anyDescendantHas3DTransform, > indirectCompositingReason)) { > layer.setIndirectCompositingReason(indirectCompositingReason); > childState.compositingAncestor = &layer; > overlapMap.pushCompositingContainer(); > addToOverlapMapRecursive(overlapMap, layer); > willBeComposited = true; > } > > where requiresCompositingForIndirectReason returns true because of the > perspective property on the overflow node and the 3D transform on its > descendants. If the overflow node has overflow-scrolling:touch, > willBeComposited is however set to true at the top of the function so this > conditional is never executed. I'm not yet sure how/whether this is causing > the bug, though. I'd suggest looking at the corresponding RenderLayerBacking to see which GraphicsLayers are created, and which of these GraphicsLayers have preserves3D() true. Probably in the overflow-scrolling:touch case, there's a GraphicsLayer which ends up flattening the transform (because of preserves3D() being false), so the Z component ends up having no visual effect. 1426136 6 fred.wang 2018-05-22 06:56:26 -0700 (In reply to Ali Juma from comment #5) > I'd suggest looking at the corresponding RenderLayerBacking to see which > GraphicsLayers are created, and which of these GraphicsLayers have > preserves3D() true. Probably in the overflow-scrolling:touch case, there's a > GraphicsLayer which ends up flattening the transform (because of > preserves3D() being false), so the Z component ends up having no visual > effect. Thanks for the hint! Indeed I started to debug RenderLayerBacking this morning and the perspective / z-translate transform seemed to be correctly taken into account. I'll check preserves3D later... 1426163 7 simon.fraser 2018-05-22 08:30:51 -0700 I think this is because, in the WebKit 3D transforms implementation, overflow necessarily triggers flattening, turning off preserve-3D. 1426661 8 simon.fraser 2018-05-23 11:48:14 -0700 if (style.preserves3D() && (style.overflowX() != OVISIBLE || style.overflowY() != OVISIBLE ... style.setTransformStyle3D(TransformStyle3DFlat); 1426677 9 fred.wang 2018-05-23 12:12:03 -0700 Thanks, this code was added a long time ago in bug 83337. "The CSS3 Transforms spec says that some properties should cause flattening of things with transform-style: preserve-3d." Is it still valid? I can't find it in https://www.w3.org/TR/css-transforms/ 1426688 10 simon.fraser 2018-05-23 12:32:01 -0700 https://drafts.csswg.org/css-transforms-2/ 1428411 11 fred.wang 2018-05-30 07:21:21 -0700 (In reply to Simon Fraser (smfr) from comment #8) > if (style.preserves3D() && (style.overflowX() != OVISIBLE > || style.overflowY() != OVISIBLE > ... > style.setTransformStyle3D(TransformStyle3DFlat); That code is only executed when the element has "transform-style: preserve-3d;" (which is not the case in the repro cases) so probably the flattening happens somewhere else. 1585199 12 me 2019-10-29 18:05:03 -0700 (In reply to Jayden Seric from comment #2) > Sad to see there has been no activity for over a year for such a visually > disruptive bug without a decent workaround. > > This is the best I could come up with for displaying a scrollable list of > cards, stacked on an angle. It looks weird though because there is not a > single perspective origin: > > .container { > perspective: 1000px; > overflow: auto; > -webkit-overflow-scrolling: touch; > } > > .child { > transform: rotateY(45deg); > } > > @supports (-webkit-overflow-scrolling: touch) { > .container { > perspective: none; > } > .child { > transform: perspective(1000px) rotateY(45deg); > } > } -webkit-overflow-scrolling: touch was deprecated in Safari 13 for iPad (but not iPhone): https://developer.apple.com/documentation/safari_release_notes/safari_13_release_notes#3314667 This means @supports (-webkit-overflow-scrolling: touch) can't be used anymore for a workaround. The perspective for all the scrollable 3d cards on my live websites are now broken on iPad! Not sure the best way to deal with this, some dirty user agent sniffing? 1585205 13 simon.fraser 2019-10-29 18:25:27 -0700 *** This bug has been marked as a duplicate of bug 156435 *** 1666426 14 fred.wang 2020-06-26 07:36:42 -0700 (In reply to Simon Fraser (smfr) from comment #13) > > *** This bug has been marked as a duplicate of bug 156435 *** Thanks Simon. The testcase seems to work in iOS 14 beta 340960 2018-05-22 01:02:41 -0700 2018-05-22 01:02:41 -0700 testcase bug164949.html text/html 547 fred.wang PCFET0NUWVBFIGh0bWw+CjxodG1sPgogIDxoZWFkPgogICAgPHRpdGxlPmJ1ZyAxNjQ5NDk8L3Rp dGxlPgogICAgPG1ldGEgY2hhcnNldD0idXRmLTgiLz4KICAgIDxtZXRhIG5hbWU9InZpZXdwb3J0 IiBjb250ZW50PSJ3aWR0aD1kZXZpY2Utd2lkdGgiLz4KICAgIDxzdHlsZT4KICAgICAgLnNjcm9s bGFibGUgewogICAgICAgIGJvcmRlcjogMXB4IHNvbGlkIHJlZDsKICAgICAgICBoZWlnaHQ6IDEw MHB4OwogICAgICAgIG92ZXJmbG93LXk6IGF1dG87CiAgICAgICAgcGVyc3BlY3RpdmU6IDFweDsK CS13ZWJraXQtb3ZlcmZsb3ctc2Nyb2xsaW5nOiB0b3VjaDsKICAgICAgfQogICAgPC9zdHlsZT4K ICA8L2hlYWQ+CiAgPGJvZHk+CiAgICA8ZGl2IGNsYXNzPSJzY3JvbGxhYmxlIj4KICAgICAgPHNl Y3Rpb24gc3R5bGU9InBvc2l0aW9uOiBhYnNvbHV0ZTsgaGVpZ2h0OiAxMDFweDsiPkJJRzwvc2Vj dGlvbj4KICAgICAgPHAgc3R5bGU9InRyYW5zZm9ybTogdHJhbnNsYXRlWigtMXB4KTsiPlNNQUxM PC9wPgogICAgPC9kaXY+CiAgPC9ib2R5Pgo8L2h0bWw+Cg==