It's about this page http://chios-grill.de/anfahrt.html
In Safari and sometimes in Google Chrome the right text box just falls below the whole pages like this: http://imgur.com/Ekeg8el
It works nicely while offline but not while the page is online. Could it have to do something with the Google Maps embed?
If you need the code, tell me. Otherwise you can just use Google Chromes Developer Tool to look into it I guess.
I think this is width problem, because I have updated the width for the div id='textbox' and it's gone down, try to give a little width just to make sure that is compatible for all the browsers.
This will fix this problem. Try it!
Related
I am doing an animation with ScrollMagic and GreenSock's TimelineMax. The animation is suppose to go in a WordPress page. However the animation has some glitches when the page is open in Chrome. This problem does not occur in Safari and Firefox. I can't test for IE.
This is how the problem looks like:
And this is how it is suppose to look like:
The most bottom part with title Your web site goes up, and the two top parts move down. As I said, it works perfect on Safari and Firefox, but on Chrome you have to scroll up and down to fix the issue. However this is not acceptable for us, since the users of our page wont see the animation properly when they first scroll down.
Here is JSFiddle of the animation. Now, this will most probably work without problems in JSFiddle, but when I put this in WordPress page it looks like on the first image. Does anybody have a clue why this happens?
I found the solution :) I don't want to delete the question, because I hope somebody will find it useful.
The solution is to increase the z-index of all the elements (images, divs, everywhere where I have z-index in the css.). I increased it for 1000 on every element and it worked.
this is the picture that my page looks like
this is the picture when i want to print my page
The height is different, when the css class is the same. I really don't know about this problem. Is there anyone experience this problem. FYI, I am using google chrome. When I use firefox, this issue doesn't appear, but the other thing is a mess and I want to do this on google chrome. Please help me.
Per this blog post here (http://www.david-lewis.com/css/css-that-can-affect-performance-on-ipad-web-apps-or-phonegap/), there is a bug in iOS 5 that I have no idea on how to get around.
Essentially like the title says, if you have a section of your site that is scrolls (I'm using the new -webkit-overflow-scrolling), and if there is an iframe out of the viewport, it will not load it.
The blog post linked above says the following:
iFrames
What is it: Using iFrames in overflow:scroll elements to show things
like videos or maps What’s the symptom: If you have an iframe that is
outside of the viewport in an overflow: scroll element (especially
when using -webkit-overflow-scrolling: touch) then it will not render
as you scroll to itWhat’s the cure: no idea, please send me the
answer
Does anyone know how to fix this? I've been looking all over the web for a cure, but it is no luck. It seems to be that if you click on the iframe, it will show it after the click.
This in my mind is a huge issue for people developing web-apps. Does anyone know of a fix?
Well, I hate leaving this as an official "answer", but as of time of posting, there is no fix...
I'd assume if you'd use JavaScript to extract the HTML from the iframe, put the code in the same spot, and somehow get the CSS to work with it too, it would work. But darn, that would be too much work to do on such a slow device like an iPhone.
See http://www.arthwine.co.uk.
This used to work fine in Chrome and works fine in all other browsers (afaik). Now, for some reason, Chrome is hiding most of the left column (apart from the bear). If you look on a different browser, there is a panel with the branding and a menu in it under the bear.
I can't figure out at all why it's doing this. Any ideas?
The reason it breaks is because of the bear. Or rather, it is because of the way you relatively positions the image of the bear outside the bounds of every single one of it's parent elements except the body.
This makes chromes rendering engine choke on your layout somehow.
You can test this very easily by just deleting the image of the bear from the source code, and see how everything else suddenly pops into place.
I checked it in Chrome 9.0.597.98 and I had the same problem. The solution that I found, is to add position:absolute; for the #header.
I don't see anything wrong in Chrome. I see the menu and the branding.
I have a simple html page in an iframe that I am trying to scale with an html5 input range slider. it creates a white border inside the iframe, what looks to be a doubling side effect.
It works perfect in chrome(6.0.472.59 mac), but not in safari (5.0.1 mac).
here is a link to live demo - http://dl.dropbox.com/u/1031653/safari-bug.html
Any sort of suggestion on why this may be happening? hardcore hacks are fine if need be.
This appears to be a Safari bug. I would recommend reporting it at https://bugs.webkit.org/
I'm seeing this bug in Chrome as well (version 11.x.x)
One solution is to go into the IFRAME's document (assuming you have access) and set the size there. Something like this:
$('iframe').contents().find('body').css('-webkit-transform', 'scale(0.5)');