Content doesn't scroll in Safari browser

Safari doesn’t update the scrollTop / scrollLeft properties of an element its any of its ancestors has overflow set to hidden.

Scroll offset is used to calculate the final render position of a 3D object so, in Safari, elements never scroll:

https://github.com/keithclark/3d-model-element/blob/2d16b02b14dfd761d376e3189ef419e497dfb4c9/src/model-element.js#L151-L152

Note: I’ve had reports that this is fixed in the latest Tech Preview.

[keithclark]

I may have a partial solution for this. As part of a different issue I’m working on to support models nested in DOM elements with CSS overflow, I’ve had to split domUtils. getTransformForElement() into two functions:

The original getTransformForElement() will now only return a transform matrix for an element. The new function, getProjectionForElement() returns the computed perspective value, the accompanying projectionOrigin, the camera position and it’s clipping bounds (which are passed to THREE.WebGLRenderer.setScissor())

The upshot of this is, the projection function calls element.getBoundingClientRect(), which fixes some demos that use scrolling in Safari. 😄

This appears to be limited to some DOM / CSSOM combinations so I need to do some testing to see what works and what doesn’t.

[shshaw]

Yes, if the values could be cached and only had to be recalculated on resize then it wouldn’t be a big deal, but anything that affects style running every frame will definitely drain perf. This is still on my mind; I’ll reach out if any other ideas pop up.