GithubHelp home page GithubHelp logo

Comments (3)

dholbert avatar dholbert commented on July 30, 2024

One other problematic spot with respect to transforms:

In the piece of the spec that excludes scrolling elements (sec 2.2, "there does not exist an Element P such that..."), the spec discusses whether the node N's position has changed within its scroll-container's "scrollable overflow region".

And importantly, transform does change an element's position within (and its contribution to) this scrollable overflow region. Here's a demo which changes transform of something in a scrollport on hover: https://jsfiddle.net/dholbert/n937w14L/
(note that the scrollbars change when transform changes, indicating that the scrollable overflow area has changed size, and obviously the transformed thing has changed position within it).

So it seems that at least this section of spec text does not exclude transforms right now - it would consider transforms as contributing to layout instability. That may be problematic...?

(EDIT: this comment might be addressed by #67 -- initially I was going under the stricter "Interpretation B" that I describe over there, but maybe the real intent is the other interpretation.)

from layout-instability.

npm1 avatar npm1 commented on July 30, 2024

Looking at tests, looks like modifying transform should not result in an entry (https://github.com/web-platform-tests/wpt/blob/master/layout-instability/transform-change.html), but transform needs to be considered when computing viewport overlap (https://github.com/web-platform-tests/wpt/blob/master/layout-instability/transform.html).

from layout-instability.

clelland avatar clelland commented on July 30, 2024

My understanding here is that CSS transforms are deliberately not included in this spec, because changing them does not induce layout -- no other elements on the page need to be adjusted because of a change to transform. (Yes, this is despite the fact that it absolutely does affect the visual representation of the element being transformed)

@npm1's note about the viewport overlap is certainly relevant, though, as a transformed element may be the container of other elements which are subject to layout shifts -- the layout of elements within a transformed container should probably be considered.

from layout-instability.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.