Firefox (v23) bug when appending image to dom after delay (JS Fiddle included)
Question
The following code in firefox causes an the image to NOT be displayed in correct location. (It should be in center of video). It works fine in chrome and other browsers. It also works if the image is not appended to DOM but loads initially OR if the window is re-sized after page load.
This only happens in firefox and I cannot come up with a solution. (NOTE: we need to append the images in javascript because it is a result of an API call that we want to do client side and NOT server side)
JS Fiddle Broken: http://jsfiddle.net/B6eYm/
<!DOCTYPE html>
<html>
<head>
<style>
a.video_link
{
position:relative;
}
img
{
width: 100%;
}
img.videoPlay
{
position:absolute;
left:0;
display:none;
}
.video-main
{
width: 49.16%;
display: block;
float: left;
}
</style>
<script type="text/javascript" src="http://codeorigin.jquery.com/jquery-1.10.2.min.js"></script>
</head>
<body>
<h1>Firefox Bug</h1>
<div class="video-main">
<a class="video_link" data-video-id="2621309976001" href="javascript:void(0);">
<img class="videoPlay" src="http://media.democratandchronicle.com/sites/default/files/icon-videoPlay-wide.png"/>
</a>
</div>
<script type="text/javascript">
setTimeout(function()
{
var video_id = '2621309976001';
var video_still = 'http://bcdownload.gannett.edgesuite.net/rochester/36517057001/201308/796/36517057001_2637049604001_video-still-for-video-2632520077001.jpg?pubId=36517057001';
$("a[data-video-id='" + video_id + "']").append('<img src="'+video_still+'" />').find('.videoPlay').show();
}, 1000);
</script>
</body>
</html>
Js Fiddle Working: http://jsfiddle.net/N9mHe/
<!DOCTYPE html>
<html>
<head>
<style>
a.video_link
{
position:relative;
}
img
{
width: 100%;
}
img.videoPlay
{
position:absolute;
left:0;
display:none;
}
.video-main
{
width: 49.16%;
display: block;
float: left
}
</style>
<script type="text/javascript" src="http://codeorigin.jquery.com/jquery-1.10.2.min.js"></script>
</head>
<body>
<h1>Firefox Bug</h1>
<div class="video-main">
<a class="video_link" data-video-id="" href="javascript:void(0);">
<img style="display: inline;" class="videoPlay" src="http://media.democratandchronicle.com/sites/default/files/icon-videoPlay-wide.png"/>
<img src="http://bcdownload.gannett.edgesuite.net/rochester/36517057001/201308/796/36517057001_2637049604001_video-still-for-video-2632520077001.jpg?pubId=36517057001" />
</a>
</div>
</body>
</html>
1 answers
solution1
2 ACCPTED 2013-08-30 13:30:15
if you add display:block to your a.video_link it should work properly:
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.