I have an ActiveX on a page... I know ... ActiveX ... blarghhh!
That for some logic business reason we had to go with ActiveX, but the problem is that I can't make the ActiveX <object> to be beneath anything else ...
it's extremely weird!
Live plain example and Live example with iframe wrapper
You can try the example, but remember that the ActiveX only work in Internet Explorer, and no matter what version for the ActiveX, it will always run.
This problem I'm facing is the overlapping one:
Playing with position and z-index does nothing and I have no more ideas :-(
ActiveX controls are rendered as "windowed" elements in Internet Explorer, whereas most other elements (particularly in newer versions of IE) are "windowless". Flash has a wmode option for whether it draws windowless or windowed but, in my experience, this is very difficult to achieve, especially if the object is written in .NET and not C++.
All windowed elements paint themselves on top of all windowless
elements, despite the wishes of their container. However, windowed
elements do follow the z-index attribute with respect to each other,
just as windowless elements follow the z-index attribute with respect
to each other.
All windowless elements are rendered on the same MSHTML plane, and
windowed elements draw on a separate MSHTML plane. You can use z-index
to manipulate elements on the same plane but not to mix and match with
elements in different planes. You can rearrange the z-indexing of the
elements on each plane, but the windowed plane always draws on the top
of the windowless plane.
> http://support.microsoft.com/kb/177378
There are two potential solutions I can think of. You could try the iframe "cutout" solution, which explains that you can use iframes to "cut out" part of the plug-in for the HTML below to show through.
The second solution is to draw your popup menus in a popup object. These are separate windows that render in front of your web page and can even exceed the boundaries of the document — with some limitations — the major downside being that they don't have shadows so this might uglify your styling a little.
Related
I'm trying to find the reason for performance problems on a mobile website (based on React and Material UI).
The page shows fairly complex content (a form), which however does not change (in respect to this question). The form itself has position: fixed, exact coordinates and even transform: translateZ(0).
Visually on top of the content there is a 48x48 pixel 100% rounded <div> (a custom FAB = Floating Action Button) that is scaled up to 25x during a transition (covering the whole screen when finished).
The FAB is basically an overlay for the whole page. It's an element outside of the form tree.
When I simplify the page by removing the complex form, the FAB animated smoothly even on low-end hardware (thanks to the GPU).
However, with the form the performance decreases significantly.
I see no reason for that and would expect that the form would get it's own layer and only rendered ("painted") once.
When looking at the Chrome DevTools timeline with just the Paint option checked I see that a lot of form elements (like a simple label) get re-painted during the animation.
See the images below for the reasons that Chrome gives for that:
I don't really understand what that means. Why chooses Chrome to repaint these elements?
Update 1
I was able to reproduce the problem here: http://www.webpackbin.com/N18obvEBM
The problems show up when there is a MUI <Drawer>. Even when it is closed (moved out of the viewport using transform: translate) it forces the browser to re-render:
It's even worse if the Drawer is visible on screen.
Note that apparently it makes a difference if the browser window is on a HiDPI (4K) screen or not. Same test on a 1050p screen:
On the lower-res screen the circle is apparently scaled-up from the 48x48px raster rendering (edges become very blurry). That does not happen on the HiDPI screen.
Anyway adding display:none to the Drawer layer makes makes the rendering perform well (but is obviously no solution).
I am a self-taught web designer with a staggering 3 sites or so under my belt. I just finished the first page of a website for a client who is a friend and therefore a lot more patient than a "real" client would be.
I love the way the sites looks, it is fairly consistent in the spectrum of popular browsers, and overall I was quite proud of it until I realize a major problem that to be honest is about two steps away from making me drop my dream of becoming a web designer.
When using Chrome, Safari, or older versions of Explorer the website's layout falls apart if someone has their zoom set to anything other than 100%.
It is frustrating me to the point of near depression. I used a div to surround the whole body, and the pages layout, which in this case is a MENU is done almost entirely with ULs (unordered lists) positioned absolutely.
The site is made up in such a way that all the parts connect (almost like a puzzle) and if some parts are out of line, it is dreadfully obvious.
I heard the zooming rounds up figures and could call for a couple of low alpha pixels here and there, but in my case some block elements are literally 25-50 pixels out of place.
http://www.stevemarcella.com
No need to get your dreams crushed just yet :> There is always hope.
First thing you should do is check all of the errors, which according to validator are 536 errors on the homepage.
I suggest you run the validator and correct errors one by one. It could solve your problems. First error I noticed is that you have a div element outside of body. You should keep everything inside the body tags.
This is outside of body.
<div class="wrapAroundBody" id="IdWrappingWholeBody">
Hope it helps.
I have two Flash objects on a webpage (call them A and B), and they overlap so one partially obscures the other. I don't seem to have any control over the z-index, to force B in front of A. Whatever I try, A always 'wins' and stays on the top!
I have read many people's posts about problem with getting HTML to show over the top of Flash...but nothing about when your two overlapping items are both Flash objects.
I have tried various combinations of wmode=opaque/transparent/window
I have tried CSS position:absolute/relative and z-index:0/999
I have tried placing the HTML sections in a different order
The problem is the same in IE and Firefox
I do not want to use jQuery in this case
In my particular situation B must have position:absolute and wmode=transparent, and sit above A. A needs relative positioning and transparency is not required. However, I have been testing without these restrictions, and I still have no control over the overlap. Are some SWFs (ours are adverts sent by clients) created in such a way as to override any code control of z-index?
The reason for this arrangement is that A is a standard banner advert at the top of the page, and B is a 'page curl' effect where a corner peels down from the top right of the page.
Thanks for any advice you can give.
I managed to control the situation for one of my advert banners by getting rid of the <object> tag and just using <embed> on it's own. Then the wmode=opaque trick worked in both IE and Firefox.
However, a different advert SWF did not respond to this change, and still shows above my page curl/corner peel.
Facebook Connect uses JS/CSS overlays/popups for user interaction. I have sites with Flash elements, and no matter how I set the z-indices, the Flash always seems to go to the top.
I have a similar and likely related problem with a div with display:fixed at the top of the screen, where it gets covered by the Flash when you start scrolling.
How can I make sure the Flash element layers properly?
If you just need your flash to fall behind other object then you should use wmode=opaque. This will correct the z-index.
wmode=transparent will also correct the z-index but it also makes your stage transparent so whenever you have nothing on the stage or gaps between objects your html will show through underneath. This in turn causes more system strain.
Ergo if you just need the z-index correcting use wmode=opaque
Generally, I've needed to set the wmode=transparent property on the Flash object and/or embed string.
http://www.communitymx.com/content/article.cfm?cid=e5141
Is there an easy way to replace the ScrollPane scrollbar with the OS's native scrollbar?
Flash applications look much more integrated if they have the same skinning as the user's operating system -- which isn't always easy to detect (Vista Aero vs. Classic?).
Have you guys come across any examples of Flash apps doing this?
To set up something like this would be a big and dirty job. If you're that concerned with OS look-and-feel integration, you're probably better off using native browser controls rather than Flash or another plugin.
Arguably, you could break up your Flash application into separate SWF modules and put each of them into their own scrolling div or iframe in the page. You'd then have to communicate through ExternalInterface or LocalConnection to pass data between the SWFs. Personally, I'd only be willing to try that as a technical challenge to myself, but I doubt it would be worth the effort for a production application.
For the curious, we separated the scrollpane component into a self-contained swf and placed a set of two nested divs along the right and bottom side of the widget.
Using the vertical scrollbar as an example, the outer div was set to the height of the scrollpane and had a CSS overflow-x of hidden, and an overflow-y of auto. The child div was then set to some arbitrary width and a height equal to the height in px of the scrollpane's content.
The browser would display an appropriately sized "scroll grip" and we could quickly read the vertical scroll offset on the outer div to know how far to offset the Flash scrollpane. The same technique, with appropriate modifications, was used for the horizontal scrollbar.
We also included some logic to auto-hide the containers based on their overflow. The result matched native OS behavior pretty closely.
While this may sound like a huge hack, we were able to widely deploy the solution (scribd.com) without any major issues.
Hate to say it, but there is no way to do this. You could use an OS inspired skin/theme, but even then there's possibilities that the user could have modified their appearance settings with custom colors, sizes, etc.