Just out of curiousity:
Is there something different in the way that Safari handles images compared to other browsers?
I used to serve the logo of my site as a background-image from a CSS file so that it doesn't have to be re-loaded on every page (at least that's what I thought).
I recently switched to another approach because it's more in line with what Google prefers and with what people in this thread suggest.
<h1>
<a href="http://www.mycompany.com">
<img src="logo.png" alt="My Company" />
</a>
</h1>
However, when clicking through the pages the logo keeps flickering because Safari seems to be re-loading it on every page. Other browsers such as Chrome and Firefox are fine, though. It seems that they cache the logo.png when they first encounter it.
Any idea why this happens or how to prevent it?
Related
I made a website using webflow, in this website I have one icon that is load using :
<img src="yoursuper.svg" loading="lazy">
Nothing too crazy and it works as expected on the browser, but on iPhone (I never tried on Android) the website goes crazy and reload an infinite number of time or just crash instantly showing 'a problem repeaditly occured' on the screen. If I disable javascript the website is working fine. If I put loading="eager" everything works as expected. Nothing shows up inside the console and redirectdetective.com report was totally normal.
2 weeks before the website was working as expected on phone and the code did not change since this two weeks.
Did someone have any idea of why loading="lazy" can break a website on phone ?
It says right here on the CanIUse that the loading="lazy" attribute is not yet supported on any version of Safari unless the browser is manually put in Experimental Mode. For browser specific issues it is always good to check caniuse for compatibility. If you want Safari support you will need to choose a different method or use a polyfill like this one.
I have a website where images are loaded through <img src="..." />
One of these images is RSM's logo, however on the webpage it displays as this:
<img src="https://assets.clicksminuteper.net/bots/rsm/normal.svg" />
This happens for almost all SVGs on the page, except for simple, single path shapes.
What causes this, and what ways can I fix it?
Update: This bug only appears to happen on chromium based browsers. Those show 2 of the grey bars and not the third, as well as not rendering the background.
What has happened with code that now SOME right side up images are displaying online upside down even when the code is exactly the same for all images?
I have been a web designer for a million years and I have never had this happen before. I've got it on 2 websites with different code. 1 is just an img tag and the other is an animated gallery. In both cases SOME photos are displaying upside down while others are not, and they are all right side up in real life on the computer.
The upside down thing is happening in Chrome and Safari but not on the iPhone.
Here's code:
Could not possibly get any simpler.
<body class="loading">
<div class="page">
<img src="images/Ralphs-sons.jpg" alt="family portrait painting of kids" border="0">
Is there a code to lock the orientation so it cannot be flipped by whatever insanity the gurus who break the wheel have done now?
I saw a post about orientation but it didn't make sense for this since I am not doing anything special here and that code was supposed to be to fix a problem in only one web browser, not lock it for all browsers...
I solved the problem with a workaround. I opened the image in Photoshop and saved it from Photoshop so that it is no longer merely recognized by browsers as a photo saved from a camera.
In asp.net MVC I was loading blobed images from my db this way. It was displaying correctly on all browsers.
using the following
<div class="blogImage">
<a href="~/WaiGuoAtHome/ImageHtml/#Model.Id">
<img class="img-responsive homePhoto100" src="data:image;base64, #Convert.ToBase64String(Model.Image)" title="#Model.Caption" />
</a>
</div>
Navigate to the following page in firefox, IE and Chrome. Same code but on Chrome the image doesn't display.
http://jacksonjhayes.azurewebsites.net/WaiGuoAtHome/ImageHtml/3646
I don't think this is a size issue, the image on that page is very big, but I display smaller images elsewhere that are much smaller.
#onetrickpony your idea did the trick. Thanks! To bad I can't just use whatever image type I want any more but that makes sense, and I think all my images are jpeg anyway.
Our site runs on WordPress. On this page we have a series of text widgets, each containing a chunk of HTML and inline CSS. It's a bit crude, but it allows us to provide our marketing people with a simple template they can use to add a new item.
Each item is a link wrapped around an image, an h1 and some p tags. We're getting a really weird issue on iOS. The link is supposed to open a new browser window. When we're on an iPhone 4 and tap on some of the links - like the top two examples currently on the page - nine times out of ten we briefly get a tiny loading icon in the iOS top status bar, then nothing else. The only way to get the link to respond is to tap and hold till you get Safari's Open/Open in New Page dialogue. On the other hand, when we tap on some of the other links the new window opens straight away as you'd expect. You should see what I mean if you try that on an iPhone 4.
I've carefully compared the HTML for the items that work properly, and the dodgy ones, and they seem to be pretty much identical, apart from content differences. Here's an example of markup that works OK:
<div style="padding-bottom:20px;border-bottom:1px solid #ccc;overflow:auto;">
<a target="_blank" href="http://yourworld.metro.co.uk/" style="text-decoration:none;color:#333333;font-family:Arial, Helvetica;">
<img src="http://metrouk2.files.wordpress.com/2013/07/ay_113922733.jpg" style="float:left;margin-right:6px;" alt="directline" />
<h1 style="font-size:1.7em;color:#193989;font-family:'CorpidBold', Arial, Helvetica, sans-serif;"> WIN PRIZES WITH YOUR PICS!</h1>
<p style="margin-bottom:10px;font-size:.9em;line-height:1.4em;">Every week in Metro’s Your World we'll set you a photo challenge and feature the best submissions in our digital editions. And, for the whole of July we're giving away Samsung Galaxy cameras AND Amazon vouchers for the best photos! Check out this week’s challenge and submit your photos here.</p>
<p style="margin-bottom:10px;font-size:.9em;line-height:1.4em;"></p>
</a>
</div>
and here's one that has the weird behaviour:
<div style="padding-bottom:20px;border-bottom:1px solid #ccc;overflow:auto;">
<a target="_blank" href="http://intu.co.uk/lakeside/competition/metro" style="display:block;text-decoration:none;color:#333333;font-family:Arial, Helvetica;">
<img src="http://metrouk2.files.wordpress.com/2013/11/comp-module.jpg" style="float:left;margin-right:6px;" alt="directline" />
<h1 style="font-size:1.7em;color:#193989;font-family:'CorpidBold', Arial, Helvetica, sans-serif;"> WIN £2,000 to spend at intu Lakeside</h1>
<p style="margin-bottom:10px;font-size:.9em;line-height:1.4em;">Every day this week, Metro is teaming up with intu Lakeside shopping centre to offer five lucky readers the chance to win a gift card with a whopping £2,000 to spend at the centre. For your chance to win, click here. Competition opens Monday 2nd December.</p>
<p style="margin-bottom:10px;font-size:.9em;line-height:1.4em;"></p>
</a>
</div>
Can anyone explain this bizarre situation or suggest a fix? I've been noticing a similar issue on other links. Maybe this is an iOS bug?
===============
EDIT
I should mention I've tried changing the order of the items in the list in case there was some invisible element on the page that was obstructing the touch event. I've also added the same items to a dummy list on my test WordPress site. And I've tried changing the CSS, including the overflow style on the container, and the text in the h1 and p tags. All with no change to the behaviour.
===============
EDIT
This has something to do with the href of the link. When I change the href of the dodgy item to the same as the good item it suddenly works fine. Bizarrely, when I change the href to http://google.com, http://yahoo.com or http://bbc.co.uk it stops working. When I set it to http://metro.co.uk it works. WTF???
We seem to have found the answer to this - iOS Safari's popup blocker is blocking the links. A colleague tried the same page on his iPhone 5S and encountered the same behaviour. He also noticed that his desktop Chrome was blocking popups when he tried the links there. When I turned off popup blocking in iOS Safari they worked fine. Also, when I removed the target="_blank" attribute from the links they worked fine with popup blocking on. Adding target="_blank" to the links with JavaScript didn't help.
The conclusion from this experience is that iOS Safari blocks external links with a _blank target.
On iOS, Safari mobile renders the content. Its behavior is very different from the desktop safari.
I'm thinking the errors begin with using commands the mobile safari can't understand. In your code overflow:auto is one of them.
But see the accepted solution for that here: Overflow-x value ignored in mobile safari
Also if you're using javascript note not all events are handled by the mobile safari. If you're noticing strange behavior, i would start my investigation around these issues first. For eg. some events are not firing at all or they're firing instantly because they're not implemented. It's a really deep bunny hole imho.
I hope it helps a little.