positionOverlayCanvas

Bugs will be moved here once resolved.

Post » Tue Jul 03, 2012 4:51 pm

Ok try explain it clearly, sorry for my english, I'm french first :P

I found the solution to fix it, but it's on frame code, that only you could permenently fix :) let me explain...

So I dont have any .capx for that, cause the probleme is in integration of canvas in my html. So first, here a example of my html and style, minimum requirement to reproduce my problem:

[CODE]
<body>
     <header>My header</header>
     <section>
          <canvas id="c2canvas" width="1000" height="500"></canvas>
     </section>
     
     <style>
          header{
               display:block;
               height:200px;
               background:#DDDDDD;
          }
          section{
               display:block;
               position:relative:
          }
          section canvas{
               border:1px solid #DE0000;
          }
          section #c2canvas{
               border:1px solid #000000;
          }
     </style>
     
</body>
[/CODE]

The result of this set canvas overlay top at "200px"... It's wrong cause it's supposed to be "0px" due to the position:relative; in section tag. So the overlay canvas dont position it correctly in that kind of situation. Yea, I can move my canvas tag out of there, but it broke my semantic css...

I looked in c2runtime.js to find a solution, and I just found this function:

[CODE]
runtimeProto.positionOverlayCanvas = function()
{
     var overlay_position = jQuery(this.canvas).offset();
     overlay_position.position = "absolute";
     jQuery(this.overlay_canvas).css(overlay_position);
};
[/CODE]

If I replace ".offset();" by ".position();", which retrieves the current position relative to the offset parent, it solve the problem!

For now I fix it manualy after each export, but I'm pretty sure you could fix this quickly.

I hope it's my explanations are ok and clear! Tell me if not.

Peace
B
12
S
2
G
3
Posts: 15
Reputation: 2,515

Post » Tue Jul 03, 2012 6:19 pm

Oh I just found it's possible to fix it localy in preview.js. It's ok for now, I will have to fix it on every release!

Let me know if you will fix this soon.
B
12
S
2
G
3
Posts: 15
Reputation: 2,515

Post » Tue Jul 03, 2012 6:30 pm

I'm a little worried this could break one of the variety of fullscreen modes that we support (which are very sensitive to subtle CSS changes like this), but it seemed to work OK in my testing. So I've made the change for the next build.
Scirra Founder
B
359
S
214
G
72
Posts: 22,946
Reputation: 178,468

Post » Tue Jul 03, 2012 7:24 pm

Of course yea it's possible. Should push with more tests to be sure...

I just found now it broke position on full screen, for the exact same reason, but reverse... When on fullscreen, relative seem to be different. I fix this with this:

[CODE]

runtimeProto.positionOverlayCanvas = function()
     {
          var overlay_position = (document["mozFullScreen"] || document["webkitIsFullScreen"] || document["fullScreen"])?jQuery(this.canvas).offset():jQuery(this.canvas).position();
     overlay_position.position = "absolute";
     jQuery(this.overlay_canvas).css(overlay_position);
};
[/CODE]

I hope this help
B
12
S
2
G
3
Posts: 15
Reputation: 2,515

Post » Thu Jul 05, 2012 1:33 pm

@francoisdiotte, it worked OK for me in fullscreen, which particular combination of settings/browsers did you try?
Scirra Founder
B
359
S
214
G
72
Posts: 22,946
Reputation: 178,468

Post » Thu Jul 05, 2012 5:27 pm

I put the change in to r98 anyway, to see if it causes anyone problems. Does it work better now?
Scirra Founder
B
359
S
214
G
72
Posts: 22,946
Reputation: 178,468

Post » Thu Jul 05, 2012 8:49 pm

I use Chrome 20.0.1132.47 and without the fullscreen detection, the overlay are missaligned.

So I recommand you using this to be sure
[CODE]
var overlay_position = (document["mozFullScreen"] || document["webkitIsFullScreen"] || document["fullScreen"])?jQuery(this.canvas).offset():jQuery(this.canvas).position();
[/CODE]

This weekend I will download the r98 at home and test it again. Today it's impossible due to overwork! By the way, we just buy a license but it's not affiliate on my personnal account. My boss buyed one, his name "Paul Gamache". So we pay for your great product and really really appreciate it!

Thx to paying attention on my issue!
Peace
B
12
S
2
G
3
Posts: 15
Reputation: 2,515

Post » Thu Jul 05, 2012 8:54 pm

Oh I just got an idea to be sure this not affect performance at all, you can write something like that:

[CODE]
if(document["mozFullScreen"] || document["webkitIsFullScreen"] || document["fullScreen"]){
     runtimeProto.positionOverlayCanvas = function()
     {
          var overlay_position = jQuery(this.canvas).offset();
          overlay_position.position = "absolute";
          jQuery(this.overlay_canvas).css(overlay_position);
     };
}
else {
     runtimeProto.positionOverlayCanvas = function()
     {
          var overlay_position = jQuery(this.canvas).position();
          overlay_position.position = "absolute";
          jQuery(this.overlay_canvas).css(overlay_position);
     };
}
[/CODE]

But I'm not sure if document["fullScreen"] are set at this point.
B
12
S
2
G
3
Posts: 15
Reputation: 2,515

Post » Thu Jul 05, 2012 11:28 pm

@francoisdiotte - I added the fullscreen detection code in r98. Let me know how it works!
Scirra Founder
B
359
S
214
G
72
Posts: 22,946
Reputation: 178,468

Post » Mon Jul 09, 2012 7:52 pm

Yes it work!!

Sweet thanks, we really appreciate it! You can close this ticket :)

Peace
B
12
S
2
G
3
Posts: 15
Reputation: 2,515

Next

Return to Closed bugs

Who is online

Users browsing this forum: No registered users and 5 guests