Scroll Problem when an animation is applied

1

Sidebar scroll doesn’t work when a simple animation is applied.
See the first and second pages of attached file.

Scroll.zip (59.4 KB)

2

Without diving too deeply,

It looks to me as if the DOM loses track of the scrollHeight or something because of the animation.
Can’t say I have seen this before but I can repeat it in a new project with a rect with long text and using Hypes content flow rather than css style.

A simple fix is to embed the rect in a group. Give the group scroll.
Set both group and rect flexible layout the same: left pin, top pin, bottom pin and top to bottom sizing.

Leave the group on scene but offset the rect inside it off scene and animate the rect on scene.

Something that shows the issue and how this hack is a hack is;
The rect background is grey. But it’s off scene text is set to visible.

When the group scrolls this rect scrolls up and brings it’s off scene text into view. Cool all working.
But the off scene text’s background is transparent.

So you get part grey background and white…

Second hack is to add an animation to change the groups background to grey when the text is animated.

ScrollMHv1.hype.zip (80.4 KB)

This is a hack as far as I am concerned and hopefully someone will figure out a true fix for this.

1 Like
3

I think it is a browser bug related to translation positioning.

Therefore, another fix is to check Position with CSS left/top in the Document Inspector.

1 Like
4

Solved:)

Thank you to Mark and Jonathan.
Checking the box for Position with CSS left/top in the Document Inspector solved the problem with Safari.

2 Likes
5

You can also uncheck “Protect from external styles” and put all the css in the head file.
(note I have added the !important; declaration where needed. )

<style>	
.scroll { overflow: scroll !important; }	
</style>

<style>
a:link {
  color: #5e5e5e!important;
  background-color: transparent!important;
  text-decoration: none!important;
}

a:visited {
  color: #5e5e5e!important;
  background-color: transparent!important;
  text-decoration: none!important;
}

a:hover {
  color: #999999!important;
  background-color: transparent!important;
  text-decoration: underline!important;
}

a:active {
  color: #999999!important;
  background-color: transparent!important;
  text-decoration: underline!important;
}
</style>


  <style type="text/css">
    p.p1 {margin: 0.0px 0.0px 0.0px 0.0px!important; font: 14.0px Helvetica!important; color: #1155cc!important;}
    span.s1 {font-kerning: none!important;}
    table.t1 {border-collapse: collapse!important;}
    td.td1 {width: 228.0px!important; height: 17.0px!important; padding: 0.0px 2.0px 2.0px 2.0px!important;}
  </style>

As far as I can see do not sure you do not need

  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta http-equiv="Content-Style-Type" content="text/css">
  <title></title>
  <meta name="Generator" content="Cocoa HTML Writer">
  <meta name="CocoaVersion" content="1561.61">

in the innerHTML.

You can just have the table code in there without any of the above.

1 Like