I have a large, wide image I'm animating using CSS. The image is displayed and animated as expected on Chrome (Both desktop & on Android) and Firefox.
However, on Safari (Both desktop & mobile, v12.1), the image is usually not being animated, or worse - shown partly/not being shown at all - on the initial load. After one or two page refreshes it begins to behave as expected (probably because it loads the image from the cache).
After disabling the animation, the image is displayed fine on the initial load.
Demo
Source code
Any ideas why Safari behaves like that?
I ended up loading the image through JavaScript which made it show up and animate properly on Safari. This does not solve the source of the problem but works fine as a temporary fix.
const imageElement = document.getElementById('image');
const image = new Image();
image.onload = function() {
imageElement.src = image.src;
imageElement.className = 'animation-class-name';
};
image.src = 'pic.jpg';
Related
A very weird thing happened a couple of hours ago. I am developing a new site - which is already live Utopia Africa - using laravel & bootstrap. I am normally using Firefox on my mac to view the local site. Suddenly everything started to be rendered "big" by Firefox as for a cellphone but with text extremely big (see image below) and all logos/images at full size (although img-fluid). The size of text and images do not change when resizing the window. I tried everything like clearing cache, rebooting... However, the same local site is perfectly rendered on chrome, opera & safari. And once again, the same source file (I compared them) is rendered well on firefox when on the live server (as the above link shows). I am pulling my hair off with this one... any idea?
Have you zoomed Firefox by accident? Press CTRL + 0 to set the viewport zoom to 100% instead of 300% it is now on.
Firefox zoom option:
https://support.mozilla.org/en-US/kb/font-size-and-zoom-increase-size-of-web-pages
I have a question about responsive pages. I have a page for my website which looks fine on an apple macbook air. However, when I looked at my website from my mothers laptop, the screen cut the homepage partway off, because her screen is smaller. I have responsive images and used media queries for small screens, but I can't seem to make my page look good when it's on a smaller screen. The images do resize when I change the width of the screen, just not if I only change the height. Why not? I tried to fix this by doing a media query for only small heights, but that doesn't work either. How can I make sure my page also looks good on smaller heights?
If you need code I can post it or send a github link, one or the other. :)
You can take the height of the div by jquery and set the height to css. You can follow the below code and customize at your own way.
$(window).on("scroll",function(e){
var scroll = $(window).scrollTop();
if (scroll > 100 ) {
var height = $('.height-of-the-div-you-want').innerHeight();
// alert(height);
$('.set-this-height-dynmicallty').css('height', height);
}
});
I'm displaying this image on a website, however Chrome seems to be adjusting the brightness or saturation (not sure the exact term). I've only run into this problem recently, this image was displaying on Chrome correctly however some recent changes in Chrome must have changed that.
I've done a quick test with browsers and here are the results:
Chrome Desktop (64.0.3282.186): Broken
Chrome Mobile: Broken
Opera: Working
Edge: Working
Raw image can be found here: https://imgur.com/a/3TLlc
Here's a side by side comparison between Chrome (left) and Edge.
Could anyone tell me the cause of this? Or perhaps point me in the right direction?
I think that your image is in CMYK (print) color mode. Chrome renders its colors differently.
Try to open the image with an editor (for example: Photoshop, Gimp 2), set the color mode to RGB (if the editor doesn't do that by default), and save it (or export it) with the same extension, .jpg. This works for me.
If your colors are changing a little bit, that is because of the conversion to RGB.
I have a weird problem occurring with a web page being viewed in google chrome. When viewed in ie9 / safari the embedded youtube video works fine but for some reason in chrome it just displays a black box on page load. The weird thing is the moment the page is interacted with, ie. the user scrolls down, the video will display correctly. I'm not sure what's going wrong.
The page in question is: http://core.slnmedia.com/inspiration/
There's a script on the page that will detect the width available to the right of a large tile and if there is sufficent space, the pop-out panel will display on the right. If not, the panel will display on the left. If you resize your browser window so that the 'bevis marks' tile sits at the top right corner of the screen and only has a small amount of space available on the right, then click on it, you'll see the effect I'm talking about.
The javascript function that's changing the position of the tile is below:
$('.large-tile').hover(function() {
$(this).find('.bw-photo').hide();
$(this).find('.inspiration-detail-wrapper').show();
$(this).css("z-index", "2");
var profile = $(this).find('.inspiration-detail');
if(profile.find('.content').text().trim().length == 0) {
showData($(this).attr('id').substring(1, $(this).attr("id").length));
}
// **Depending on how much window space is available, position the panel on**left/right
var available = $(window).innerWidth() - ($(this).offset().left + 300);
if(available >= 412) {
// If enough space then show panel on right
profile.css("left", "320px");
}
else {
// Otherwise attach left
profile.css("left", "-368px");
}
profile.show();
$('.scrollbar-wrapper').tinyscrollbar({ size: 252 });
},
function() {
$(this).find('.bw-photo').show();
$(this).find('.profile').hide();
$(this).css("z-index", "1");
$(this).find('.inspiration-detail-wrapper').hide();
});
The weird thing is that the line profile.css("left", "320px"); is what causes the trouble. If you don't include this line then the video displays correctly. For some reason the positioning causes the video not to display correctly.
I hope I've explained the problem correctly - does anyone have an idea of where I'm going wrong here? It's driving me nuts!
Thanks
I was having trouble after a Microsoft update. I cleared my cache and cookies for the last week and everything works fine now.
This worked for me:
<iframe allowfullscreen frameborder="0" height="315"
src="http://www.youtube.com/embed/A3pIrBZQJvE?wmode=transparent" width="420"
wmode="Opaque"></iframe>
Source
I want to open a popupwindow (with close button only) when the user clicks a button and the parent window should be disabled until the popup window closed. For that I'm using the following code
function popup_window(url) {
popupwin = window.showModalDialog(url,null,'height=20,width=150,status=no,resizable=no,scrollbars=no,toolbar=no,location=no,menubar=no');
}
Anyhow, this code is working perfectly in IE. But, I hav two problems.
In firefox, it is not opening with the size I've mentioned in the script. It is opening in full size. And In Google Chrome, parent window is not getting disabled.
Thanks in Advance
The syntax of the args is different. For example:
window.showModalDialog(url, null,
"dialogwidth: 150; dialogheight: 20; resizable: no")