Disappearing Image Elements
I recently changed PCs to a machine running 64-bit Windows XP. When I did, I initially had trouble running a project I was working on, so I updated all my dependencies, including switching over to Navi 2.0.
With this, I was able to successfully run my project and even use the new transparency feature, but I ran into a frustrating issue. Elements of pages served in Navis would disappear, often in response to the Navi coming in to focus or elements changing images due to mouse-over. In almost all cases, they would be replaced with the background color of the page being displayed on the Navi, causing transparent Navis to lose the ability to interact with these elements.
I wasn’t sure if this was a result of my code not properly reflecting the new version or an incompatability of my new machine with the new Navi, so I went back and set up the Navi Demo, and I was able to reproduce the same behavior. However, I was only able to get this issue to occur when I used the ‘Open Google’ button to travel to external websites with a large amount of content.
After some browsing, I located the simplest website I had found that still caused this issue to occur, which was a Statistics Page for the game Team Fortress 2. I made a local copy of this website and removed portions of it seeking the offending element that brought on this issue.
Eventually, the page was stripped down to nothing except a series of large .png images in a row with extremely minimal formatting, however, the issue could still be reliably reproduced by scrolling to the bottom of the statisics page and then clicking the buttons on the “menubar” Navi.
Removing a certain number of the images or decreasing their size would make reproducing the issue either difficult or completely impossible. The sample html below was the minimal number of images to reliably reproduce the issue on my machine.
The final test html used to try to sort out the issue actually directly linked the TF2 status images so that it could be handed off to other potential debuggers without any changes to the html, and it was as follows:
<html>
<body>
<img width="1024" height="1024" src="http://steampowered.com/status/tf2/public_graphs/totaltimeplayedbyclass.png">
<img width="1024" height="1024" src="http://steampowered.com/status/tf2/public_graphs/avgpointshour.png">
<img width="1024" height="1024" src="http://steampowered.com/status/tf2/public_graphs/avgkillshour.png">
<img width="1024" height="1024" src="http://steampowered.com/status/tf2/public_graphs/avgassistshour.png">
<img width="1024" height="1024" src="http://steampowered.com/status/tf2/public_graphs/avgcaptureshour.png">
<img width="1024" height="1024" src="http://steampowered.com/status/tf2/public_graphs/avgtimelifeminutes.png">
<img width="1024" height="1024" src="http://steampowered.com/status/tf2/public_graphs/damagedealtofalldamage.png">
<img width="1024" height="1024" src="http://steampowered.com/status/tf2/public_graphs/avgdamagehit.png">
</body>
</html>
For this test, I disabled the transparency on the menu bar, so that I could continue to use it after the background color engulfed it.
In this sample test, after scrolling to the bottom of the statistics page, I clicked each menu button once and when making a second pass, the “equip” button vanished entirely, replacing the surroundings with the background color. Clicking the “chat” button had similar results. When I pushed the “status” button, the “on” state of the button and the hp+ and hp- icons appeared, but the entire menu bar was swallowed up.
Disappearing Equip Button Screenshot
Menu Bar Mostly Vanished
Has anyone encountered an issue similar to this one before? Thus far I've only been able to speculate as to what the real cause of this is and how to find a solution. Any help in sorting it out would be greatly appreciated.
The Code Kingdom
viva la programmers!
good luck
