Yosemite, Canvas, HTMLViewer and position:fixed

Before Yosemite I could place a Canvas over a HTMLViewer and it completely covered anything that was displayed in the HTMLViewer.

Since Yosemite, some HTML elements are displayed under the canvas, and some are displayed over it. For example, when I set an object position to fixed (in HTML), it is displayed over the canvas (see the second square being visible over the red vertical canvas bar):

In Mavericks and older OS X versions, canvas covers everything (all HTML objects are displayed under the canvas):

Is there any way I can get the “old” way back in Yosemite (to make the canvas fully cover the HTMLViewer content again)? Plugins, declares, anything?

Here’s a sample test project: http://bit.ly/1ttxB6W

I could not reproduce the error by running your project, with Native or WebKit renderer…

2014R2.1.

If this still manifests on your end, I would suggest placing a rectangle under the canvas. It may be enough to shield it from the HTMLViewer content.

[quote=135529:@Michel Bujardet]I could not reproduce the error by running your project, with Native or WebKit renderer…

2014R2.1.

If this still manifests on your end, I would suggest placing a rectangle under the canvas. It may be enough to shield it from the HTMLViewer content.[/quote]

That is strange. What build of Yosemite do you have?

I think Native vs WebKit setting does nothing on OS X, it is only used when building for Windows.

In Yosemite, it seems nothing can shield from HTMLViewer objects set as position:fixed — no matter what I put over them, they are always displayed on the top. I have checked it on three different computers. Are you really getting the second image in OS X 10.10? The one with full red vertical bar?

[quote=135652:@Grzegorz Pawlik]That is strange. What build of Yosemite do you have?
Are you really getting the second image in OS X 10.10? The one with full red vertical bar?[/quote]

Preview 4. I will test again after I upgrade to Preview 5.

And, yes, I am getting the image 2, where the canvas masks entirely the HTMLViewer…

Preview 4 is a very old build (14A298i). Try with GM Candidate (14A388a).

OK. Under Preview 6 the bug manifests and I found no way to shield from the grey square.

I tried using JavaScript to change the fixed attribute, but since it is defined in CSS, no way.

I found a way.

html_vs_canvas2.zip

To obtain the same result as having the HTMLViewer masked by the canvas, I placed an HTMLViewer onto a ContainerControl, then put one small instance on the left of the canvas, and another one on the right, both loaded with the same page. To insure the correct position of the page on the right of the canvas, I pushed the HTMLViewer position to the left in the right hand side container. I believe one could even get the effect of a rectangular canvas in the middle, by using superimposed instances on top of each other the same way.

It’s now final and publicly available. Yosemite.

I just backed up my current Mavericks disk to be able to upgrade my main HD :slight_smile:

Just thought of another way : load the HTML page into a string, do a ReplaceAll of the position:fixed by nothing or something else, then use that in the HTMLViewer. Could be an issue with some designs, but simpler than the multiple CC instances.

Of course, the simplest would be to fix the bug. But it may take a while …

It could just be a difference in the way Safari renders things. I’ve seen things like this in other browsers over the years.

The interesting thing is that it did not manifest in earlier Yosemite builds.

Which is why I’m thinking safari. Apple typically updates Safari in spurts for a new OS, not as incrementally as the OS itself, so a LOT of things change from one release to the next.

Don’t get me wrong, it could be a bug, but it could also be a necessary side effect of one of their new power saving features too.

Just to be clear, stacking controls on top of one another is not recommended anyway (except for tab and page panels).

That is quite probable. I quickly checked, and the issue still presents itself in the final version of Yosemite.

After the Container Control combo, the source modification, I just thought about yet another approach : a borderless floating window positioned where the canvas was, containing itself a canvas. Since borderless windows are not naturally floating windows, you will need a declare to make it floating. Or use a floating transparent window. See the examples for a Mac OS X transparent window.

One thought is to declare into setWantsLayer: and make your canvas be layer backed.

I got the position:fixed element to be covered with these changes

Move Canvas1 inside HTMLViewer1 so it’s a child of HTMLViewer1

Call setWantsLayer on HTMLViewer1

[code]Sub Open()
declare sub setWantsLayer lib “Cocoa” selector “setWantsLayer:” (id As integer, value As boolean)
setWantsLayer(me.Handle, true)

Dim f As New FolderItem
me.LoadPage(a, f)
End Sub[/code]

This limits the canvas to inside the HTMLViewer though :frowning:

[quote=136369:@Will Shank]I got the position:fixed element to be covered with these changes

Move Canvas1 inside HTMLViewer1 so it’s a child of HTMLViewer1

Call setWantsLayer on HTMLViewer1

[code]Sub Open()
declare sub setWantsLayer lib “Cocoa” selector “setWantsLayer:” (id As integer, value As boolean)
setWantsLayer(me.Handle, true)

Dim f As New FolderItem
me.LoadPage(a, f)
End Sub[/code]

This limits the canvas to inside the HTMLViewer though :([/quote]

You can always add a canvas under the HTMLViewer with the same color/picture to show out of its boundaries. If positioned right together with the one inside, it should look as one.

You have interesting ideas :slight_smile:
The problem is, the canvas in the real project is not just a square. The sample project is a simplified version, and position:fixed is impossible to be changed without destroying the layout.

[quote=136369:@Will Shank]I got the position:fixed element to be covered with these changes

Move Canvas1 inside HTMLViewer1 so it’s a child of HTMLViewer1

Call setWantsLayer on HTMLViewer1

[code]Sub Open()
declare sub setWantsLayer lib “Cocoa” selector “setWantsLayer:” (id As integer, value As boolean)
setWantsLayer(me.Handle, true)

Dim f As New FolderItem
me.LoadPage(a, f)
End Sub[/code]

This limits the canvas to inside the HTMLViewer though :([/quote]

Thank you! Thank you very, very much! :slight_smile:
I’m testing it right now and it seems to work OK.