bug here: https://groups.google.com/a/chromium.org/forum/?fromgroups#!topic/chromium-bugs/eUfzp3UJDwo%5B1-25%5D
just encountered this problem, streaking up my screen on chrome, but not on firefox, or IE. anyone on a mac seen this?
Removing the background-color:
body {
...
background-color: #fff;
}
in the CSS of the HTML document which is rendered into the iFrame did solve the issue in my case.
After one full day trying to solve this bug I can confirm that there's another workaround and it's probably an "easier" one.
In my case these solutions didn't work. In fact, applying them to the examples in the issue tracker of chrome (look for them here http://code.google.com/p/chromium/issues/detail?id=143354 ) didn't actually solve the problem. (PS: the problem is usually based on using the scrollbar and SOMETIMES in using the mouse scrolling).
Therefore I did some searches for services the worked and guess what:
Visual Website optimizer didn't have this problem
and they are indeed using and iframe, good job guys!
So, what solution did they use?
They used a fixed height.
(yup!)
So, take the example in the chrome issue 143354 (the one with the red background, ok?)
and change the code from
<html>
<body style="background-color:red">
<p>This is outside the iframe</p>
<iframe width="80%" height="50%" frameborder="0" src="./page2.html"></iframe>
</body>
</html>
to
<html>
<body style="background-color:red">
<p>This is outside the iframe</p>
<iframe width="80%" height="50%" src="./page2.html" style="margin: 0px !important; padding: 0px !important; height: 286px; "></iframe>
</body>
</html>
This will solve the problem of red lines.
To fix my webapp I needed to calculate the height on every window resize, put those margin/padding , and avoiding relative positioning on the iframe, nothing more.
Hope it helped (It almost drew me out of my mind to solve it)
Still same problem here using Windows 7 and chrome 22.0.1229.94 except white lines appear when scrolling down, not scrolling up.
I've tried all solutions proposed but nothing seems to fix it.
Setting -webkit-margin-after and -webkit-margin-before make lines disappear when scrolling down but now it appear when scrolling up.
In chrome group forum, they say it should be fixed in 23 series but who knows...
Finally, can find a workaround (not so cool but works) inspired by some read.
Here it is:
$(document).ready(function(){
//to fix scrolling bug in iframe for chrome (issue: http://code.google.com/p/chromium/issues/detail?id=140447)
if(/chrom(e|ium)/.test(navigator.userAgent.toLowerCase())) {
var ibody = document.getElementsByTagName('body')[0];
window.onscroll = function(e) {
ibody.style.visibility='hidden';
ibody.offsetHeight;
ibody.style.visibility='visible';
}
}
});
Had the same issue. Resolved by setting position style to relative:
<iframe ... style="position: relative"></iframe>
The issue causing these visual anomalies has been confirmed fixed in the latest canary build of chrome (>= 25.0.1365.1 canary), so hopefully the chrome stable channel should have the fix fairly soon.
I found out that it's possible to workaround this Chrome bug by shaking up the DOM a bit.
E.g. this was causing the issue:
<h1>foobar</h1>
<iframe src="..." style="border:none"></iframe>
... but replacing the H1 with SPAN fixed it:
<span style="display:block">foobar</span>
<iframe src="..." style="border:none"></iframe>
I ran in to a similar problem and was able to fix it in my case by setting -webkit-margin-after and -webkit-margin-before to 0.
<h1 style="-webkit-margin-after:0; -webkit-margin-before:0;">foobar</h1>
<iframe src="..."></iframe>
Also, I initially tried replacing the H1 with a span as in Jiri's example, but the lines came back when I tried to apply a top and bottom margin of .2em to the span. Removing margins cleaned things up (I just used line-height to create some space around the header)
Related
So I have this very simple Bootstrap landing page, and everything works great in Chrome/Safari etc, however I found out today that you cannot click on some links when you use Microsoft's Edge Browser.
The page is live at Slice Virtual Golf
On closer inspection, it would seem to be only the links which are inside Bootstrap col- parents which have trouble being clicked, and interestingly, if you change the browser window size, or open the developer tools then the links magically start being accessible.
I have had a good search, found a couple of issues similar, left a comment for a Microsoft support engineer who had suggested to fix the problem that a clean boot was required, however that seems a little excessive to me for something which looks like a bug.
If anyone knows of this issue or can take a quick look at the code then please let me know what you come up with because it's just too weird of a thing not to try and resolve.
This appears to be a bug in Internet Explorer, and Microsoft Edge. I was able to determine the cause to be the temporary application of overflow: hidden to the body, and the floated/positioned layout of the anchors below the fold. It appears as though IE/Edge determine these to be unreachable links (initially) as a result of the overflow: hidden styling.
I have reduced your page to the following:
<!doctype html>
<html style="overflow-y: scroll; height: 100%;">
<head></head>
<body style="margin: 0; height: 100%">
<a style="float: left; position: relative; margin-top: 1000px" href="#">Link</a>
<script type="text/javascript">
document.body.style.overflow = "hidden";
setTimeout(function () {
document.body.style.overflow = "visible";
}, 2000 );
</script>
</body>
</html>
This combination results in non-functioning below the fold anchors.
A bug has been filed for the Microsoft Edge team to evaluate this issue.
Track this bug: https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/7843412/
IMPORTANT NOTE! I have only recreated this bug on a 1st generation iPhone running Safari 4.0 (528.16), but as I'm trying to make my site as widely compatible as possible this is still a potential issue...
The problem: floated elements in lists are not appearing on screen. I have narrowed the issue down to the following combination of rules:
<html>
<head>
<style>
p {
float: left;
overflow: hidden;
}
ul {
list-style: none;
}
</style>
</head>
<body>
<ul>
<li><p>hello</p></li>
</ul>
</body>
If I place a non-floated element inside the <li> tag following the <p>, then the text in the <p> becomes visible.
So far I have tested this on the latest versions of Chrome/IE/Firefox on Windows 7, Safari on an iPhone 4, and Chrome/Firefox/Opera on Android (4.2.1 ) and the problem described has not occurred
I repeat: I have ONLY seen it occur on Safari 4.0, but as I can't test every platform/browser version combination out there, I am concerned this issue may be more widespread.
Thanks
I am also encountering this issue, however I am seeing it in Safari 5.1.7 in Windows 7.
My current hot-fix is unfortunately JavaScript-based:
$('.listContainer').hide();
$('.somethingElse').hide();
$('.listContainer').show();
I don't exactly understand why this works, but as long as .somethingElse is a valid selector, the hide/show operation shouldn't get optimized away and will actually force Safari to render the list. Someone who actually understands the nuts and bolts of this could probably lend a more graceful solution, but that's the hack I'm using right now.
EDIT
The weird thing is that if I place the dynamically-generated HTML statically into the .html file I'm working in, there is no rendering problem in Safari. There's something lower-level going on here with how the DOM is constructed in Safari that's breaking this. It's also quite possible that I'm not following some standards for how new elements should be added to the DOM in real time.
Any help? Maybe I should add a question of my own.
FINAL EDIT
Alright, I got it working through CSS, now.
The solution is to give the list-items overflow:hidden.
I don't know why, but that solved my problem. Hope it solves yours. Give it a shot.
I think the problem here is that you've got overflow:hidden which is why your element move out of range. Actually, if you have any element with some width specified and overflow: hidden then you are trying to hide some internal tags
for eg:
<div style='width:200px'>
<div style='float:left;'>asdfkl</div>
<div style='float:left;'>asdfkl</div>
<div style='float:left;'>asdfkl</div>
<div style='float:left;'>asdfkl</div>
<div style='float:left;'>asdfkl</div>
<div style='float:left;'>asdfkl</div>
</div>
Then you are actually trying to hide anything that goes out of given 200px width Provided you have the inner divs float so that all of them are in same line/ section or div
When there's a bunch of float elements, the parent element will not be able to calculate its height properly.
After all your float elements include an empty element as follows
<div class="break"></div>
. break{
height: 1px;
width: 100%;
clear: both;
float: none;
}
We've got a really annoying layout problem on our site only in IE (7 & 8 tested), Firefox and Chrome works fine. The problem is on this page:
http://www.foe.co.uk/community/campaigns/climate/rio_resources_33589.html
The problem code is that the report images should appear to the left of the text to the right. We have a simple that contains the item and the a inner floated to the left and another floated to the left too. Both have widths that are less than add up to less than the outer DIV. Here's an example bit of code that isn't working:
<div class="resourceitem">
<div class="resourceleft">
Test LEFT
</div>
<div class="resourceright">
Test RIGHT
</div>
</div>
The relevant CSS is simply:
.resourceitem {
margin-bottom: 10px;
overflow: hidden;
width: 100%;
}
div.resourceleft {
float: left;
margin-left: 20px;
width: 156px;
}
div.resourceright {
float: left;
padding: 0;
width: 268px;
}
Any help is much appreciated, it's driving me bonkers!
Cheers,
Chris.
UPDATE - Fixed it.
Ah. Ok found the problem folks - it's was down to my responsive linking code and IE8's Developer Tools showing rules that don't actually apply. The rules for this were in fms-res.css file but this only gets used on Browsers that understand media queries, and have width > 980px. IE8 uses a default. desktop-only file, called m-equiv.css - the rules were missing from this file. The Web Developer Toolbar very unhelpfully shows the rules as applying to the elements from the fms-res.css file, even though actually they don't. I'd forgotten this effect of Developer Tools, we usually see with our print stylesheet (print.css) rules showing, even though they don't apply (unless when actually printing).
Massive thanks for the contributions folks, sorry it was such a stupid fix in the end.
Cheers!
Remove </a> from the following code It is an extra code (might be a typo) and causing trouble in IE:
<div class="resourceleft">
<img border="0" alt="Rio+20: Is this it?" src="http://www.foe.co.uk/imgs/Rio_-_is_this_it.png" />
</a>
</div>
Note: every <div class="resourceleft"> has an extra </a>
UPDATE - Fixed it.
Ah. Ok found the problem folks - it's was down to my responsive linking code and IE8's Developer Tools showing rules that don't actually apply. The rules for this were in fms-res.css file but this only gets used on Browsers that understand media queries, and have width > 980px. IE8 uses a default. desktop-only file, called m-equiv.css - the rules were missing from this file. The Web Developer Toolbar very unhelpfully shows the rules as applying to the elements from the fms-res.css file, even though actually they don't. I'd forgotten this effect of Developer Tools, we usually see with our print stylesheet (print.css) rules showing, even though they don't apply (unless when actually printing).
Massive thanks for the contributions folks, sorry it was such a stupid fix in the end.
Cheers!
First of all, I've been searching for an answer in Google and forums, but didn't find, sorry if it has been asked before and if you can link me to an answer it would be great.
Here's my problem: I have a web calculator made of a table with buttons inside. Here's a link. If you open it with IE it will be all messed up, so don't. I'll work on it later. On FF the rowspaned buttons do not stretch up and down to cover the hole cell, on Chrome it looks as intended. How do I make it look good on FF too? thx in advance to responders.
Using a <table> for layout is a bad idea for numerous reasons that don't need to be re-hashed here. What matters for you is that FireFox displays tables differently than other browsers and you are going to have a hard time laying out your buttons as you want them with that approach.
Instead, just ditch the table and absolutely position the buttons, or float them.
Edit: A floated layout works nicely:
http://jsfiddle.net/gilly3/7rL97/5/
JSFiddle's frame messes up the display if you view it in chrome, but if you view it in chrome outside of the frame, you can see it works fine in chrome as well: http://fiddle.jshell.net/gilly3/7rL97/5/show/
#yekhezkel gilly3 is probably right. but i found solution to your problem. It works in firefox and chrome. I have not tested in IE.
step1: add a class of fix to all the td's containing rowspan=2. It should look something like this.
<td rowspan="2" class="fix">
<button onclick="modifyInout('+')">+</button>
</td>
Step2: add the following css for fix class
.fix {
height: 70px; /* double the value of td height you specified earlier */
}
Let me know if it helps.
Here is the jsFiddle: (open in firefox or other browser to test it.)
Regards :)
Read this and try to add padding
padding: 18px 6px;
Padding will stretch your button
Hello Everyone and Good Morning,
I am working with the page:
http://702wedding.com/live/
And it works in ALL my browsers Execpt IE. I dont have IE so I am kinda flying in the dark as far as fixing it. My boss is saying something about the iframe border showing in IE and w/e else any of you IE'ers can see. Also the font on the index page BEHIND the modal is showing tiny font.
I am on a mac and desprately need a way to see IE in the future, BUT can anyone help me fix this this morning?
Problems:
iFrame Showing in IE
Tiny Font behing Modal in Index Page.
Thank You all very much, as always.
^_^
I see the frame border in IE7. Try setting border: 0 and background: transparent in your styles for the iframe. Then add allowtransparency="true" as an attribute to the iframe.
Instead of border:none, try setting the border to an explicit value:
style="border:0px solid #fff; overflow:hidden; width:100px; height:21px;"
Also, try setting the display selector to block.
I have this style on an iFrame, and the border does not display in IE:
style="border:0px solid #FFF; display:block; left:0; top:0px; height:100%; width:100%;
Also, you have an extra comment in your Javascript, causing an error:
$(".example5").colorbox({innerWidth:686, innerHeight:624 ->,<- }
If you don't have any browser try https://browserlab.adobe.com/en-us/index.html.
you can get a preview of your link in set of defined browser (almost all ).
set your border="0" and frameborder="0" on the iframetag
The page is at least functional in IE6:
Note that the nav at the top of that dialog is broken. IE6 doesn't listen when you tell it a frame has no CSS "border" - you have to explicitly tell it it has no frameborder, so use border="0" frameborder="0" on the iframe tag.
Behind the modal dialog, the text isn't "tiny" - in fact, it's rendered similar to how FF renders it (though, it's IE6, so the text is hard to read/aliased, of course)
And, for future reference, you can use BrowserShots to get screenshots of the page in a variety of different browsers/versions, including IE[4-9], last time I checked.
Otherwise, you could look into IEs4Linux which'll let you run IE6 and 7 on Linux, provided you have a valid Windows license.