I am using Oracle APEX 5.0 on Oracle 11g R2. IE 11 is the front end browser. I see a very odd behavior most of the times (means not all the times).
Whenever I move the mouse on list boxes , or interactive report rows, or any other object on the page the static images starts flickering like mad.
As long as the mouse keeps moving they keep flickering. When the mouse is stopped they also stop.
These images are CSS background images in the header of the page (I modified the page template and added these images in the style attribute of the tag of the template).
<header id="uHeader" style="background:url(#IMAGE_PREFIX#****.png) no-repeat right top">
But other images on the page itself added by the tag also behave the same. Strange thing is that the CSS background images in the TABS (added via JQuery inline in the page) never showed this behavior at all.
$("nav ul li").each(function(){
if($(this).text().indexOf('**********')!=-1){
$(this).children('a').css(
{"background":'url(#IMAGE_PREFIX#*********.png) no-repeat 3px 5px', "padding-left":"31px" , "background-color":"#FFFFFF"}
);
};
};
These images never flicker.
I have tested the pages in chrome and no flickering for any image on the page happens there at all.
Has anyone ever seen/encountered anything like this? or got it around by any means?
Regards,
Related
I am looking to make a "10 foot" useable site for TV. Ideally it would have a full screen background image a small header where the nav will be placed and under it a container for the content. I would like for the container itself to have a scroll bar, as oppose to the browser having the scroll bar, since this would lose my top header.
Basically top header should be fixed, an image for a background, and a container that scrolls inside itself. I have tried finding templates or a starting point online for this with very poor results. The best i have found so far is http://css-tricks.com/examples/FullPageBackgroundImage/progressive.php
This is almost what I need except the container overflows the screen so the scroll bar is in the browser. Also this article was written in 2010, maybe there is a better way to achieve this now?
You can use CSS to style the div.
div.scroll {
background-color:#00FFFF;
width:100px;
height:100px;
overflow-y:scroll;
}
Then... all you have to do is position that div as you want.
I'm currently working on a website and having an issue with Safari. When loading an image there is a black background that is placed as a stand in. I would rather this be transparent or white, but I can't seem to figure it out. Check it out:
http://blazing-ocean-6482.herokuapp.com/
I've made html and body have background-color:white; but this doesn't seem to have changed the issue.
Just save the PNG image with interlaced option
I had the same problem in safari 6.
My image was in grayscale color space. I switched it to rgb and the problem disappeared.
Try to check your images color space settings!
This happens because the PNG has no alpha channel.
Photoshop saves the image with the alpha channel only if the image has transparent pixels.
In order to work properly in Safari, IHDR chunk of PNG image must have "truecolor-apha" in it contents.
You can see the png chunks in tweakpng (http://entropymine.com/jason/tweakpng/) or similar programs.
I've had the same issue as above (only in Safari too). My body tag has a background image, is repeat-x and is used as the background for the whole website. When a user goes to the page in Safari, there is a flash of black on page load. I've searched for ages for a solution to this, but it appears to be an unresolved bug with Safari.
I'ved tried adding "style: background-color: #FFF" to the html and body tags and also tried using the old school "bgcolor: #FFF" - none work.
The only way I could get Safari to behave was to use CSS + jQuery. Give the body a class of "bg-on" in your html and CSS files. In a linked .js file or in the of your html page in tags:
jQuery(function ($) {
$(document).ready(function(){
$('body').removeClass('bg-on');
});//end document ready
/* NOTE (window).load fires when images have been fully loaded */
$(window).load(function() {
$('body').addClass('bg-on');
});//end window load function
});//end jQuery function no conflict mode
What the above does is when the DOM is loaded by the browser, it removes the class from the body, therefore Safari won't show a black background as no background-image is there. Then when the window.load event fires, when all assets have been loaded, the body is given the background image...
It won't affect JS disabled browsers either, as the class of "bg-on" is hardcoded into the html.
Not a particularly elegant solution, but it works for me.
I had this problem recently in Safari 6.0.2, which also showed up in mobile Safari (at least in iOS 6). Saving my background as interlaced didn't work across the board & the colour space was RGB. Thankfully my background had very few colours & converting it to GIF fixed the problem entirely.
My problem was, that I have uploaded correct file, but with page builder I have edited the image - and was converted to jpg from png.
First make png with alpha and then upload - worked.
We have a simple modal in our web application.
It's nothing special and is built on twitters bootstrap library.
It contains a backdrop that is a semi transparent white background with position: fixed and width and height set to 100%.
The modal itself, however, is not statically positioned but absolutely positioned, this is because the modal might be taller than the viewport and we don't want scrolling in the modal.
Here's the dilemma, when the backdrop is present the scrolling is far from smooth in Google Chrome, if I change the position of the backdrop to absolute everything is fine.
This has the obvious downside of not covering the entire page.
I tried to reproduce it with a JSFiddle but I couldn't (most likely due to the fact that we a lot more content on our site).
Nonetheless here is my attempt: http://jsfiddle.net/LdC4w/
So, any ideas?
Oh, and I can add that having a background image instead of opacity is not an option.
I've got a really simple page which uses a photo as a full-screen background. I'm using the following to define it:
body {
background-image: url('../Images/Backgrounds/Hillside.jpg') ;
background-size: cover;
margin: 0px;
}
The image, obviously, takes a little while to load after changing page so I've implemented a noddy jQuery $.load() to update the content without the overhead of a full page reload.
Unfortunately, firefox seems to have an issue when the new content causes the length of the page to change. Firefox correctly realises that the scale of the background image has to change and repaints the page behind the content div appropriately - but doesn't repaint the rest of the page - hence it looks like 2 differently scaled images are overlaid.
Resizing the window or causing a repaint fixes it. Unfortunately, I can't take a screenshot as it never shows the problem - presumably it does a repaint behind the scenes.
To demonstrate the problem, visit the site, shrink your browser window so that content forces a scrollbar. Change URL using the menu. Look at the image behind the main content in comparison to the rest of the page (About us and Sample Ads are long pages, contact us/prices are short).
How can I force firefox to do a full repaint? I suppose I'm looking for the equivalent of WinForm's Me.Invalidate(). Is there a better way to do the background image?
NB: I've shrunk/degraded the photo to reduce file size but haven't spent a lot of time on it yet - I know it can be much better.
Edit:
Environment: FF9.0.1 Win7 Ultimate x64.
Steps to reproduce:
Browse here
Resize the window so that the white content area is just above the bottom of the browser window (Also, it's handy to make sure you can see some land in the background to make the effect more obvious)
Click on the "Sample Ads" link
Click back and forth between Sizes & Prices/Sample Ads
As you do so, you'll notice that anything to the right of the menu doesn't scale but the image under the menu/content does.
There are two solutions I got.
The first is simply on loading new content do the following:
document.body.backgroundSize = 'auto';
document.body.backgroundSize = 'cover';
Just tells it to recalculate the cover area.
The second is very hacky and literally just tells FF to reapply all the styles.
for(var ss = 0, len = document.styleSheets.length; ss < len; ss++) {
document.styleSheets[ss].disabled = true;
document.styleSheets[ss].disabled = false;
}
That said, I would also report this as a bug to FF (if you haven't already or if it does not exist in the system).
I see a problem which probably attributes to your issue. Add this to your stylehseet:
html, body {min-height:100%;}
You see, background-size:cover; is only covering the body's physical dimensions. Let's say your body is actually only 400px with its content, but your window has 1000px of height. The browser first applies background-size:cover; which it does so for the 400px tall body, then it sees there's 600px more of space in the window, and kindly applies the background further; in this case, tiling/repeating it. By giving the html/body a min-height of 100%, as above, your body will always fill the available height.
It's not possible to set transparent background for WebBrowser of WP7. To make impression of transparent background I want to do the following workaround. I want:
To find a position and size of WebBrowser on the page.
To get page's background image.
Crop it with values what I found on step 1.
To save result in IsolatedStorage
To parse HTML and place <body background="RESULTBACKGROUND">
MyWebBrowser.NavigateToString(NewHtmlString);
I think this should be a workaround of transparent background and should work.
For now I am trying just to place any .jpg image (let's say test.jpg) on step 5.
But fail. I have "Build Action" property of file set to "Content". It is placed in the root of the project. And <body background="test.jpg"> not working. Back of the WebBrowser is still white.
What I am doing wrong?
UPD:
Step 5 is solved.
2Claus: No! Not only from web. I saved both html file and image file to IsolatedStorage and WebBrowser can show image as a backgroud.
Now the problem is that background cannot be fixed. I tried many differrent things with styles. I also tried to add a fixed div behind my text. Nothing works. The picture is always scrolling with a text. I tried to add onscroll event and pass it scrolled value to move the div in an opposite direction, but div is glued to the page :(
Any ideas?
So assuming you're talking about the WebBrowser control, you're forgetting that the HTML only can refer to urls on the world wide web.
So either you need to host your background images on a website, or you need to inject a CSS style that sets the background to either white or black (the two default background-colours of the platform).
For WebBrowser, You don't actually have to save it to the ISO to make changes on the page. You can load it navigate to it normally, and then use InvokeScript to make the changes via custom JS code. It can be a little tricky though, as you will probably need to heavily rely on the eval and stringization. The problem mentioned by Claus is still there - but you need to do some experiments. With the Mango release and SDK 7.1+, the platform support IsoltatedStorage imagesources in the form of is://path/file - maybe - maybe - maybe squared - the webbrowser's renderer udnerstands them too - then setting your bkg's url to such would work. I doubt though, as it could be seen as some minor security breach, etc
I now bumped into the same background fixed image problem. For someone wandering here I solved it placing content into a fixed-height container (div) therefore the container contents is being scrolled and not the html page, leaving background picture "fixed".
body
{
background-image:url('...');
background-position:-20px -150px;
background-repeat:no-repeat;
background-attachment:fixed;
}
div
{
height:300px;
overflow:scroll;
}
Of course background-position and div height is set specifically for a WebBrowser position in page and it's size.