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.
Related
I am not pro developer and have small knowledge of html and css only. I am trying to work on a joomla website. I tried to add Google charts to my page. Actually it's a module that I am inserting to an article through load module function. But there seems to have a conflict and the chart is not displayed correctly. It seems that there are some conflicts with the issues but I am not sure how to figure.
http://goo.gl/v1GVWk
if you go to above link and go to tabs and open trekking map tab you will see the bug. The width of chart is very small. I want to display 100% so that it can be responsive. I tried changing the width to px as well but no luck.
Please help me. ..
The width of elements that are hidden is zero. Therefore, the chart thinks your window has a width of zero and ends up using its smallest width.
Try triggering a resize event on the window when the tab is shown, this should cause the responsive code to run.
I never used Google charts, but what you are experiencing also happens on Google Maps.
You have two options, either you use opacity (or maybe visibility hidden) instead of display: none, this will make the chart to resize automatically when the page opens.
The other option is to trigger the resize event, something like this... Google chart redraw/scale with window resize
Hope it helps
Even though the outer wrapper div#ja-google-chart-wrapper-404 is set to 100% width, two child elements are fixed at 400px. Specifically, the <svg width="400"> element that sets the image at a fixed width, plus the div that wraps it has the width set to 400px. Even though you have their parent set to 100%, if the image itself has a fixed width it won't expand to fill the space.
Check to see if there's a setting in your module or in the Google Chart itself that lets you set a different width (or none at all) on the inserted image.
One solution would be to resize the SVG element when the a#tab1-trekking-map is clicked. I just tested this in the Chrome console and it worked to trigger the map to resize to the full width of the container:
jQuery("#ja-google-chart-wrapper-404 svg").resize();
Add this (or something like it) to your other scripts that are called when your tabs are clicked. If the ID of the chart wrapper is generated dynamically you may need to adjust a bit, but triggering resize() (as stated by Niet and miguelmpn) should do the trick nicely.
This is best explained with images.
Firefox, right:
Chrome, wrong:
jsfiddle.
That is a (fully green) image with 2px (red) border and a border-radius of 6px. In my design, the border is barely visible, so the image looks completely square in Chrome.
Is it possible to achieve the correct result in Chrome without extra markup nor javascript?
I don't believe you can do this with Chrome. Images will extend over the bounds of border-radius, and I think that's the intended behavior (or else they just didn't notice).
When using a div, for example, you can see that the background behaves as it should. You could consider using a div instead of img, and using your source image as the background (and forcing its width and height).
Plainly said: In Chrome, there does not seem to be a way to force your image to be hidden by the border of itself (or even of its container) unless it is set as a background. In fact, the issue has been asked about before, and blogged about as well (and, in fact, patrickzdb's comment there may help you).
Apparently it is a bug in chrome..
I normally apply box-shadow for chrome instead of border.
so, if you don't mind to apply css hack to workaround it without javascript: http://jsfiddle.net/3cuHU/
I'm using css animations on my page and Safari seems to change unrelated font weights elsewhere on the page when animations are running. Any idea why this happens? All other browsers work fine, include webkit ones like Chrome.
I've detailed the bug in a video here - http://www.screenr.com/gZN8
The site is also here - http://airport-r7.appspot.com/ but it might keep changing rapidly.
I'm using compass (#transition-property, #transition-duration) on the arrow icons. No transitions applied on the heading that's flashing. On a Mac - so it might be the hardware acceleration, but I'm still trying to figure it out.
When you trigger GPU compositing (eg, through CSS animation), the browser sends that element to the GPU, but also anything that would appear on top of that element if its top/left properties were changed. This includes any position:relative elements that appear after the animating one.
The solution is to give the animating element position:relative and a z-index that puts it above everything else. That way you get your animation but keep the (superior IMO) sub-pixel font rendering on unrelated elements.
Here's a demo of the problem and solution http://www.youtube.com/watch?v=9Woaz-cKPCE&hd=1
Update: Newer versions of Chrome retain sub-pixel antialiasing on GPU composited elements as long as the element has no transparency, eg has a background with no transparent or semi-transparent pixels. Note that things like border-radius introduce semi-transparent pixels.
Apparently, that's the price you pay for hardware acceleration: all text momentarily turns into images, which causes the drop in render quality.
However, applying html {-webkit-font-smoothing: antialiased} to turn off the sub-pixel anti-aliasing makes this problem go away. That's what I'm doing for now.
UPDATE: Since then, I've also come to learn that this happens only when the browser can't be sure if the section being animated is going to affect the text. This can usually be handled by having the text above (higher z-index than) the elements being animated, and/or making sure the text has a fully opaque background.
I've faced this issue numerous times and have had success adding the following css to the animated element:
z-index: 60000;
position: relative;
It seems it needs both z-index and position to be effective. In my case I was using it with Font Awesome animated spinners.
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.
In my application I have a row of buttons (for BBcode) that is included in various places. Each button is an empty div with fixed dimensions, a background image and an onclick handler. This has worked very well in all browsers - so far.
Now I have added one more instance of this row, but this time it is inside an absolutely positioned pop-up div. (At least that's the one notable difference that I can think of, because otherwise it's the exact same code.) This also works in all browsers except for IE8, where clicking the buttons does not do anything. Unless I switch on compatibility mode, in which case it works pretty much fine.
Isn't there any other way to make Internet Explorer behave like it should?
I had the same problem in IE8. The transparent areas in the DIVs were not clickable. An easy solution is to set the background-image to a transparent .gif.
My solution in CSS:
background-image: url("images/pixel.gif");
...where pixel.gif is a 1x1 transparent image.
I've found the solution. It was the "float:left" attribute on the buttons that made it fail.
Which is rather strange because in all the other places where this code was included, it also had the float - and it worked. Even in IE8.
Anyway, removing it and using "display:inline-block" for the placement did the trick.