So after much troubleshooting I finally figured out what’s going on. The FB widgets’ (any of the at least 4 I tried) “timeline” apparently puts a large strain on my ios safari browser and tends to cause it to crash with the more content there is on the page. *Again, this only occurs when utilizing the timeline and not when just the header and link are present.* (I am only referring to my homepage, I have not been able to make any of my inner pages crash probably because there is relatively so little content on them.) Basically, the more content there is on the page, the more likely it can be crashed. When the timeline is off however and only the header and link are on the page, or when the widget is deactivated, I haven’t been able to make the page crash regardless of the amount of content I have. For example when the widget is active, even with as few as 10 images in the gallery I can cause it to crash. On the contrary when only the header and link are on the page, or when the widget is deactivated, even with all my 115 gallery images on the page I cannot cause it to crash. Based on that, it seems to me that the FB widget timeline is causing the crashing.

Originally I created this thread to try and get some help figuring out what was going on, but I kept posting updates with the thought that maybe this will help someone in the future if they encounter the same issue.

Thanks again, Ismael, for the responses :)

Thanks for the suggestion. I tried it but it didn’t help.

Disabled the lightbox plugin and tried it. Disabled the lightbox plugin and tried three of the plugins you listed. I’m currently using the masonry gallery but I also tried both the gallery and the horizontal gallery. Everything mentioned above continues to result in the same issue.

Thanks for the response Ismael.

I’ve tried the theme’s default FB Like Widget but it’s not really what I’m looking for, for two reasons:

1) Showing the feed is important because it’s very dynamic, always being updated with relevant content and interesting photos. This gives the site (especially in my industry) an up-to-date feel as well as generating interest so people hang-out and continue to explore even further. Without the feed the widget is simply a link for people to leave and go to FB where they can see the feed (as well as other content but none typically more desirable for the visitor to seek out or want to view than the feed). And if someone absolutely wants to get to FB to see that content they can either click the link on top of the plugin/widget or they can click on the FB icon located in both the header and footer. And this leads to my second point…

2) I don’t particularly want an app/widget/link that directs potential clients away from my site when it’s only for something as simple as a feed (which seems to me like something that should be easy enough to have using a theme as popular and widely used as Enfold). I spend a lot time and money to get people TO my site and not direct them away for social proof that I should rather easily be able to give them.

I certainly appreciate the theme providing the FB Like Widget, but for the reasons above it would be really nice to have the feed. I thought I would give you guys/gals a chance to figure it out and better the theme before giving one of my developers a shot.

I’ve been using Enfold almost exclusively since 2013. It’s a great theme with people behind the scenes that have been doing a great job with it for a long time and I just want to let you all know I very much appreciate it :)

Brian

You can close it.

Thanks again,
Brian

Yep, that did it, the first slider image is loading quicker now. Thanks for the help. I just had too many images loading on the homepage. I decreased the amount of gallery pics to about half and added a “Load More” button to load the other half.

On a somewhat related note…I did that yesterday and this morning noticed that the button wasn’t working on mobile (was working fine on desktop). Did a quick search of the forum and found some threads from others with the same issue. One suggestion was to clear the cache and that seemed to resolve it, at least for now. I’ll keep checking periodically to see if it happens again. Any thoughts on why the mobile Load More button wasn’t working today, or is that a question for a new thread?

Hi Ismael, thanks for the response.

I went through the two links above and followed them step by step in terms of theme settings and optimizing my images. I had already optimized my images when I initially put them on the site, but I went ahead and downloaded the shortpixel plugin and optimized all the images again with it. At completion it said the overall compression rate was 64%.

It really didn’t do much at all as my original gtmetrix pagespeed score was F(32%) with a fully loaded time of 10 sec, and after adjusting the theme settings and optimizing all the images on the site the score now is only F(39%) with a fully loaded time of 8.3 sec.

Also, my issue with the delayed first slider image on mobile still persists. To answer your question, I have 6 slider images and they range from 100kb-140kb…not very large at all for full screen slider images. The Enfold 2017 demo and other Enfold demos typically have slider images in the range of 400kb-500kb. The interesting thing is that I didn’t always have this issue, it started relatively recently.

Brian

Hello Basilis, thnx for the response.

The update came out today and I just uploaded it…from what I can tell it looks like it solved the issue. Nice work :)

Something I’m wondering though…I believe before the update I could “swipe” through my lightboxed images once I have one selected, in my gallery for example, something i can’t do now. (Like how we can swipe through slider images.) Now only the left and right arrows cause the images to scroll. Again, I can’t remember if I could do this before but I thought we could.

So I figured it out (or at least a solution that will work). The issue has to do with viewing via chrome…doesn’t happen with any other browsers as far as I can tell. Not only does a white line show at certain screen sizes but the corners of all pics in the grid show a few white pixels…looks bad. So the easiest fix I could think of was to edit each cell and use “Custom Background Color” to make a dark background so the pixels blend with the dark boarders. Looks good now. Welcome.

Something else I’ve noticed is that it happens in chrome but not firefox or ie. Furthermore if I adjust the size of the chrome window, at certain sizes the line will be completely gone but at other sizes it will be under as many as three images. (I also tried adjusting the size of the firefox and ie windows but the line doesn’t appear at any size.)

Got it. Thanks so much Yigit, really appreciate the info.

Brian

Yep, that solved the issue.

I thought you were going to create a child theme, my bad, I’m not sure why I thought that lol.

I could have added the code to Functions.php myself, as I understand how to do that. I thought however that after adding to the parent files, upon updating the enfold theme I would lose those additions, is that correct? In other words when I update will your addition remain or will I have to add it again?

Thanks for the quick response Yigit.

Sorry about having the maintenance page up, still building the site and forgot it was activated, just turned it off.

I’m not very advanced when it comes to working with code and adding and dealing with a child theme is something I really don’t want to do if at all possible. Is there any code I can add to the Quick CSS?

So I added the following code:
#top .av_header_glassy.av_header_transparency #header_main {
background-color: rgba(255,255,255,0.2);
}
kriesi.at/support/topic/adding-a-dark-transparent-background-to-the-menu/

It did what I wanted when viewing on desktop and darkened the transparency of the header to my desired amount. The problem now is that on mobile I get a slightly darkened header…instead of being white it is now gray.

To make the gray mobile slider white again I tried this:
@media only screen and (max-width: 767px) {
#top #wrap_all .av_header_transparency, .av_header_transparency #advanced_menu_toggle {
background-color: red !important;
}
}
kriesi.at/support/topic/change-colour-of-mobile-header/

I of course changed ‘red’ to ‘white’ but got the same effect…a gray header. The transparency setting is overriding any other changes.

Is there a way to use a code similar to the this one but have it only active on non-mobile viewing?
#top .av_header_glassy.av_header_transparency #header_main {
background-color: rgba(255,255,255,0.2);
}

Again, I want to be able to do what this site is doing: http://www.ferdykorpershoek.com/
If you look at it on desktop you’ll notice a dark transparent header, and if you look on mobile you’ll notice it’s white.

• This reply was modified 8 years, 2 months ago by brianbu.