Announcement

Collapse

Forum Rules

  • No flaming or derogatory remarks, directly or through insinuation.
  • No discussion, sharing or referencing illegal software such as hacks, keygen, cracks and pirated software.
  • No offensive contents, including but not limited to, racism, gore or pornography.
  • No excessive spam/meme, i.e. copious one liners in a short period of time, typing with all caps or posting meme responses (text/image).
  • No trolling, including but not limited to, flame incitation, user provocation or false information distribution.
  • No link spamming or signature advertisements for content not specific to Dota 2.
  • No Dota 2 key requests, sell, trade etc.
  • You may not create multiple accounts for any purpose, including ban evasion, unless expressly permitted by a moderator.

  • Please search before posting. One thread per issue. Do not create another thread if there is an existing one already.
  • Before posting anything, make sure you check out all sticky threads (e.g., this). Do not create new threads about closed ones.
  • It is extremely important that you post in correct forum section.

  • Balance discussion only in Misc.
  • All art related (such as hero model) feedbacks go to Art Feedback Forum.
  • All matchmaking feedback should go here: Matchmaking Feedback
  • All report/low priority issues should go here: Commend/Report/Ban Feedback
  • No specific workshop item feedback. These should go to workshop page of that item.
  • When posting in non-bugs section (such as this), use [Bugs], [Discussion] or [Suggestion] prefix in your thread name.



In case you object some action by a moderator, please contact him directly through PM and explain your concerns politely. If you are still unable to resolve the issue, contact an administrator. Do not drag these issues in public.



All rules are meant to augment common sense, please use them when not conflicted with aforementioned policies.
See more
See less

[BUG] CSS Transitions in JS

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • [BUG] CSS Transitions in JS

    This bug was introduced in September 1st patch (http://www.dota2.com/reborn/updates#September1)

    Example:
    Code:
    panel.style.transition = "none;";
    panel.style.width = "200px;";
    
    panel.style.transition = "width 200ms linear 0ms;";
    panel.style.width = "0px;";
    This code only works the first time.
    The second time the code tries to set the transition to "none", it simply doesn't work, and the panel keeps the transition that it already had.
    After that, the panel seems to bug out even more, and it doesn't matter what value you try to set to the transition, it just stops working.

    Let me know if you need more information.
    I also saw some people experiencing similar issues with other style properties like "position" or "margin", but I only tested with transitions.

    Thanks.
    Last edited by Tischel; 09-02-2015, 11:43 PM.

  • #2
    I can confirm this. When testing with the transform property similar issues seem to be happening.
    It seems that the transform property is applied additively, meaning if there is a transform: translate(50px, 50px, 0px) and I then call panel.style.transform = 'translate(100px, 100px, 0px)' it will result in an actual translation of 150px, 150px.

    The Panorama debugger also gives some info on this: http://puu.sh/jYlR5/05cb97eedf.png

    My guess is that this patch: Fixed a bug where setting certain style properties via Javascript could stomp other properties (e.g. setting panel.style.x would stomp panel.style.y) Actually just adds the two property vectors together instead of selectively overriding one component.

    Example of what I think is happening:
    1) position.x = '30px' -> panel.position = '0px 0px 0px' + '30px 0px 0px' = '30px 0px 0px'
    2) position.x = '20px' -> panel.position = '30px 0px 0px' + '20px 0px 0px' = '50px 0px 0px'

    While this should be the intended behaviour:
    1) position.x = '30px' -> panel.position = '0px 0px 0px' - Modify x to 30px resulting in '30px 0px 0px'
    2) position.x = '20px' -> panel.position = '30px 0px 0px' - Modify x to 20px resulting in '20px 0px 0px'

    As far as I can see this behaviour affects most properties, possibly explaining any weird behaviour.
    Last edited by AgentP; 09-03-2015, 07:14 AM.

    Comment


    • #3
      bump. so i guess the transform behavior makes sense, but the position shouldn't be doing this.

      Comment


      • #4
        Bump

        Comment

        Working...
        X