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.
Related
I'm using Font Awesome 5 Free via a kit. On desktop, the icons work perfectly. But on mobile (iOS chrome (normal and incognito), iOS firefox focus, iOS safari), they behave like Schrödinger's cats...
On first page load, the icons appear. Tap reload and they disappear and are replaced by small squares. Tap reload again and they reappear. Every other tap of reload shows or hides the icons.
I notice the same behavior if I toggle back and forth between "request desktop site" and "request mobile site". (I'm not sure what's really going on under the hood there since the page renders the same either way.)
Since they do appear correctly, at least part of the time, I don't think it's a cross-origin problem or a caching problem.
An example page is here: https://onlinesafetyzone.com/learn/learning-zone.php
I've read many posts, here and on GitHub and none of the solutions has worked. Anyone have a clue what's going on?
It seems you have somekind of a XSS issue. I would try to download the fontawsome resources and deploy them with the application. Can be that they have a CDN problem, every second time the fonts break :| so maybe one of the nodes is flipping.
First off, after doing some research I am aware of previous issues relating to input fields causing issues on iOS. However, apparently this was fixed in iOS update 11.3. The device I am using for testing is an iPhone 5s running iOS 11.4.1.
I have created an html document (includes css and JS) and it is stored on the Google Cloud Platform here. If you open this link on either an Android or iPhone, everything displays and works as intended.
I am using AppPresser to create a mobile app. A page of the app loads the Google Cloud link and displays it with no issues. AppPresser provides a previewer app that can be installed on a device for testing the current app build. On an Android device, the html page still works perfectly as intended, but there are issues when testing on an iPhone. Here are some screenshots:
If the "Purchasing Price" input is focussed while at the bottom of the screen, it moves to the top as space is made for the keyboard.
Before:
After:
However, if the "Purchasing Price" input field is near the top of the screen and it is focused, everything seems to go haywire. The container vanishes and a previous container is shown. The user cannot see what data they are entering.
Before:
After:
I find this issue to be very strange, especially as the html page works perfectly on an iPhone when opened directly through the browser. Any feedback would be much appreciated.
Thanks
I thought I had tried all the fixes provided online, but adding the following css:
html,body{
-webkit-overflow-scrolling : touch !important;
overflow: auto !important;
height: 100% !important;
}
from this article, did the trick! I am still confused by two things that maybe someone can clear up for me.
Why did this issue only happen when previewing my app build, and not when loading the html file directly through the iPhone's browser (file is hosted on the Google Cloud Platform).
Why did I have to implement a fix for this, when apparently the input issues were addressed in iOS update 11.3
I'm not an expert in web and I composed and updated my website recently. I ran all the test that I could on DreamWeaver CC and tested on multiple mobile devices (tablet, android and iphone); all seems to work fine. Until I uploaded the site to my server, the site start to act weird.
1st problem:
It is a portfolio website with individual pages to corresponding projects. On each project page, the first image on the lightbox has always gone missing; but clicking into the lightbox I can find the missing image (the preview image and the lightbox image share the same source so if the lightbox can find the image it implies that the image is on the server and the path is correct).
2nd problem:
when the browser is shrink below certain size, a toggle menu will replace the content on the header, clicking the toggle menu will show a pop up menu to site links. For some reason, after uploading the site to server, the toggle menu pop up never work.
3rd problem:
The above problem is never apparent on desktop browser(all image shows up correctly; toggle menu works). To make the problem more complicated, I can't confirm if it is device or browser oriented problem. For example, the site works on chrome browser on my iphone and nexus 5(android), but problem occurs on my xperia tablet(android) chrome browser; on my xperia tablet, the site works perfectly on firefox.
Does anybody has any idea what the potential cause to the problem, and perhaps a direction to a solution?
Here's the link to my site: http://www.itsatommy.com
Thank you for your time and look forward to any reply.
Looks fine to me (Google Chrome), you need to use media queries for some certain resolutions. You also need to use some cross browser css tags lide "-webkit, -moz, -o" etc.
I'm working on a page that has the following markup:
<img
alt=""
src="/banner_home.300x200.jpg"
srcset="/banner_home.300x200.jpg 320w,
/banner_home.600x400.jpg 480w,
/banner_home.728x242.jpg 768w,
/banner_home.920x306.jpg 960w,
/banner_home.1234x400.jpg 1280w">
and it seems that in the latest Chrome & Opera, they ignore whatever the screen size is and just output whichever file is listed last (so the 1234x400.jpg in my case).
Using Picturefill, Firefox and Safari both show the correct image on smaller screens.
During my testing today I launched Opera which I hadn't opened in a while. When it first launched it was at v25 and it would show the correct image at smaller screen sizes.
Then I noticed that an update had been downloaded, so I ran it, got updated to v27, and then Opera was displaying the same problem as latest Chrome.
So it seems that something has changed in Blink recently.
Can anyone else confirm this or am I just doing it wrong?
Codepen to illustrate what I mean.
You're holding testing it wrong :D
A change that went into Chrome 40 means that when a high density resource is available in the cache (e.g. the largest possible image in your example), this is the resource that would get picked, since there's no point in re-downloading a different, lower-resolution one.
If you really want to test which resource gets download in smaller devices (not that you should rely on which resource gets picked, because srcset is not about that), you can either test on an actual device, or alternatively, open an incognito session, resize the browser (or emulate a device) and only then load the test page.
I've also created a slightly clearer test case out of yours, when you can see which image was loaded.
Also: from your example it looks like you are using images with different proportions inside srcset. That's not something you should use srcset for, but rather use <picture>, that provides guaranties regarding which resource is loaded, so your layout won't break because the wrong image loaded.
When you're using srcset there is no "wrong" image. The browser is free to pick whichever one it sees fit (because its in the cache, connectivity is low, user preferences say so, etc).
If you paste this into your console, you'll see the image source that is being rendered in your browser.
console.log(jQuery('.your-image-class img').prop('currentSrc'));
Im developing a html5 webApp for iPad and when I open it with Safari, this quit suddenly.
I'm using RoyalSlider plugin and I think the problem may be there since I'm using multiple instances but I don't know which is the specific problem and can´t solve it!
When I just use one instance there is no problem but I really need to use multiple instances of the slider.
Has anyone had similar problem?
When a browser crashes due to rendering content of a web page it is a browser bug. Even if the content is invalid the browser must handle that.
I have no idea about iPod and iPad and iGod stuff, but maybe also on those systems there is the possibility to launch the browser from the command line instead of clicking a button? This is usually the first step to take when trying to find out why some application crashes.
I have experienced crashing issues with iPad Safari and lots of large, hardware accelerated images, particularly on the first generation iPad. From a quick look at the Royal Slider homepage, it looks like they use hardware acceleration on iOS, though I don't know how they have it implemented.
When I encountered this problem it was because I was using a -webkit-transform: translate3d(0,0,0) effect to trick the iPad into hardware accelerating a div full of large images. The page would crash on load, but I was able to make it work by being more selective about which images I was trying to get the iPad to hardware accelerate at any given time. You might start by looking through the Royal Slider CSS to see how it's manipulating the images. Hope this helps!