-
AuthorPosts
-
January 28, 2016 at 11:04 am #573609
Hi guys,
I noticed that if I try to view this demo http://kriesi.at/themes/enfold-restaurant-one-page/ on my Windows Phone (Lumia 930) using Internet Explorer, I get 2 TOTALLY different layouts depending on the view preferences on the browser’s settings:1) As “desktop” on windows phone 8.1:
https://www.dropbox.com/s/tn50umf79fk9ta1/enfold_mobile1.jpg?dl=0
> This one looks great and it is just like other mobile devices show it (I tried on iPhone and Samsung);2) As “mobile” on windows phone 8.1:
https://www.dropbox.com/s/mqbpuoztmyqozty/enfold_mobile2.jpg?dl=0
> This one as you can see looks totally wrong. It doesn’t show the slider on top, it just shows a fixed background photo (scrolling up or down the whole page that image stays there, stuck), photo that I can’t even find in my WordPress media library (I downloaded the one-page demo to give it a try), and the text has no background therefore it is completely unreadable.Since, as I see, Android e iOS show the page in the same way as Windows Phone does when the browser is set to work “as desktop”, it seems not to be a big problem, but I wonder why the page looks so bad when I set the browser “as mobile”.
Any idea on how to fix that?
Thank you in advance (excuse my English) :)
Davide
January 29, 2016 at 5:05 am #574309Hey Davide,
As of now the theme doesn’t support Windows Phone unfortunately.
Thanks,
RikardJanuary 30, 2016 at 3:30 pm #575015Just chiming in as I’m in the same boat and was surprised to say the least that Enfold fails on Windows Phone (which has more than a 20% business user market share here in the UK – so it’s hard to ignore).
The only issue I am currently aware of is this background bug – when a color section background image is set to fixed or parallax it fills the viewport on mobile IE and other content sections scroll over it (ignoring their own background settings).
The issue does not occur when the background is set to scroll – so not using fixed or parallax backgrounds on your site is one option but is far from ideal as it degrades the desktop experience for all to accommodate 20% of mobile users. Setting mobile IE to desktop mode also solves the problem as you point out but we can’t / shouldn’t expect users to have to change browser settings to use a site in 2016.
My first attempts to resolve this using a general media query to force fixed and parallax backgrounds to scroll below a breakpoint were unsuccessful so I have now engaged a developer at my own cost who is looking into it.
Maybe browser sniffing the user-agent for windows phones with javascript explicitly to assign a ‘winphone’ class to the html tag and then reference it in the css to create a fallback will get us a bit further – but with no information or support (Enfold’s otherwise excellent support team seem to have been told to ignore the issue and will not respond to any requests for information) we are fishing in the dark.
Will happily share any resolution here if we find one.
- This reply was modified 8 years, 10 months ago by M1000000.
February 2, 2016 at 4:19 pm #576526Hi!
IE mobile browsers do not render the same way as IE on desktop. Enfold is running on many site’s without any issue on IE as well but the issue you are pointing out need to be checked as this is the first i am coming across.
I did check the site on my samsung on desktop view and regular on IE and everything looks fine and runs smooth.
There are several possible reasons why only you are facing this issue since every site uses different settings and different plugins. If you like to trouble shoot we are here to help you :)
Please deactivate all plugins and make sure you are using the latest version of the theme and check the site again and let us know. Please make sure to clear the browser cache while check for the issue.
@M1000000 Please open a new ticket so we can help you without getting the issues mixed up.Best regards,
VinayFebruary 2, 2016 at 4:27 pm #576531Hi Vinay, I have had a thread open for 3 weeks here: https://kriesi.at/support/topic/windows-phone-support-update/#post-567810. Being ignored.
The issue has been known for a long time (search Windows Phone on this forum).
Thanks, M
February 2, 2016 at 4:30 pm #576534Hey Vinay,
thank you for your reply… the issue is actually the same as M1000000’s one (btw thank you M1000000, your reply was great!) :)Cheers,
Davide
February 2, 2016 at 4:31 pm #576535Welcome Davide – glad it helped. And hoping the Enfold boys manage to come up with something soon. M
February 3, 2016 at 7:20 am #576915Hi,
I’m not sure what to tell you other than that we are aware of this, finally it’s up to Kriesi to decide if he want’s to make the effort to support Windows Mobile or not.
Regards,
RikardFebruary 4, 2016 at 3:57 pm #577811Hi Rikard,
I think there are two points here – one is providing full support for Win Phone and the other is providing a fix for the issue above.
The first would be great. But I understand that supporting all browsers on all devices is an impossible goal, supporting microsoft browsers has always been a pain and that a long term commitment to Windows Phone would require resourcing. However, the fact is that despite its circa 3% penetration of the global consumer market it does have a significant share of others (7% consumer in European countries / 25% in UK business) and it is generally perceived as one of the big three – so without support for it I cannot honestly tell clients that sites we build on Enfold are mobile friendly. Something that should probably be made clear on sales materials if the number of people, like me, finding out the hard way is anything to go by.
The second would be perfectly acceptable to me at this point. This pesky background issue is the only one I am aware of that makes the site unusable on Windows Phones and the only one I have received customer complaints about.
In any event it would be useful to let us know whether this is actually being actively investigated and whether a fix for the background issue is likely or possible even if full WP support is not.
In the meantime I continue to invest time and resource in an attempt to work out why it seems the background setting applied in the page editor cannot be over-ridden with css on winphone when it can on iOS/Android and any ideas you might provide to give us something to focus on would be most welcome.
All the best, M
February 17, 2016 at 9:58 am #584544Wow! I wish I had read this sooner or that you had somehow placed a warning on your ThemeForest page that it is incompatible with Windows phones. I have just finished redesigning a web site for my clients’ business – http://web52.sand.studiocoast.com.au/ – only to have them ring me as soon as I sent them the link that it looked “crap” on their phones – they both have Windows phones.
Do I now have to redesign my site in a different theme?
The issue is not just parallax or fixed backgrounds but also with LayerSlider. What a mess!
Is there any possibility of a fix for this through some css?
And Rikard is saying “As of now the theme doesn’t support Windows Phone unfortunately.” That was posted on 29 January 2016. So this issue has only recently arisen? Can we go back to a previous version that WAS compatible?
What are my options here?
Would appreciate a response.
Wizard247
February 17, 2016 at 12:49 pm #584650Hi Wizard247 – have responded on the thread I started here: https://kriesi.at/support/topic/windows-phone-support-update/#post-584647.
February 19, 2016 at 8:26 am #585906Hey!
Thank you for your thoughts and we are very sorry for the inconvenience that this issue may have brought you. We might not be able to provide full support for windows phone but we’ll try to fix major issues such as the parallax background. We created a custom script that will remove the parallax container and then apply the background in the actual color section container. Please add the following code in the functions.php file:
// windows phone background fix add_action('wp_footer', 'ava_windows_fix'); function ava_windows_fix(){ ?> <script type="text/javascript"> (function($) { function a() { var ua = navigator.userAgent, ie = new RegExp("IEMobile"), isMobile = ie.test(ua); if(isMobile && $('.avia-section .av-parallax').length >= 1) { $('.avia-section').each(function() { var section = $(this), parallax = section.find('.av-parallax-inner'), pbg = $(parallax).attr('style').split(';'), bg = ''. bgurl = ''; if($(parallax).length != 1) return; $(pbg).each(function(key, value) { if(value.indexOf('background-image') != -1) { bg = value; } }); bgurl = bg.split(' '); $(bgurl).each(function(key, value) { if(value.indexOf('url') != -1) { bgurl = value; } }); $(this).find('.av-parallax').remove(); $(this).removeAttr('style'); $(this).css({ "background-image" : bgurl, "background-attachment" : "scroll", "background-position" : "center center" }); }); } } a(); })(jQuery); </script> <?php }
Remove browser cache or hard refresh the page. Let us know if helps.
Cheers!
IsmaelFebruary 19, 2016 at 12:07 pm #585967Hi Ismail,
thank you, I appreciate your the effort, but nothing seems to have changed.
The layout still looks great if my phone browser is set to desktop mode – in this case, as it was before, everything is fine – but it definitely doesn’t with the phone browser set to mobile mode: the slider on top doesn’t work, it just shows the last slide’s image, fixed, and when scrolling down the page the whole content flies over that fixed image making it very, very hard to read…thanks again
Davide
February 19, 2016 at 1:29 pm #586030Hi Ismael,
Thanks for this – real progress at last. Before I implement could you please confirm whether this fix applies to parallax and fixed backgrounds (as the issue affects both).
Many Thanks, M
February 19, 2016 at 3:09 pm #586086OK implemented and tested on Browserstack (caches cleared etc) – same as Davide I’m afraid – not fixed no noticeable difference.
Ismael – what did you test this on?
February 20, 2016 at 6:00 am #586390Hi!
I used the google chrome’s emulator, device was set to Nokia Lumia 520. I’m not sure why it’s not working on your end but it’s probably the browser detection line. We added a little modification to the code above. Please test it again.
Regards,
IsmaelFebruary 20, 2016 at 5:16 pm #586489Hi Ismael,
Still not working for me I’m afraid. I’m testing on browserstack – have tried Lumia 520 / 630 / 925 / 930.
I can’t speak for Chrome emulation but I found that Win Phone emulator in IE does not show the issue (and therefore useless for troubleshooting) while browserstack and real device do.
Can I just check that you were able to reproduce the issue on Chrome emulator before using this fix?
Thanks. .
February 21, 2016 at 6:15 am #586579Hi!
I can’t reproduce the issue on the emulator but I know that the parallax container which contains the background covers the whole screen. What if you remove the whole mobile browser detection? Remove this line:
isMobile &&
Make sure that all cache plugins are disabled or purge all cache before checking.
Regards,
IsmaelFebruary 21, 2016 at 8:12 pm #586737Hi Ismael,
Before I go through the testing cycle again can I just clarify this – you are aware that this issue is not limited to parallax backgrounds and effects fixed backgrounds too right?
M
February 23, 2016 at 2:02 am #587519Gave it a go while waiting – no change.
February 23, 2016 at 5:41 am #587553Hi!
@M1000000: Yes, I’m aware of the “fixed” background issue but let’s take this one step at a time. Could you please provide a link to the page with the issue? Try to set the color sections to parallax instead of fixed then test the site again. If it doesn’t work, please try to replace the code with this:// windows phone background fix add_action('wp_footer', 'ava_custom_script_windows'); function ava_custom_script_windows(){ ?> <script type="text/javascript"> (function($) { function a() { var ua = navigator.userAgent, ie = new RegExp("IEMobile"), isMobile = ie.test(ua); console.log(isMobile); if(isMobile) { $('.avia-section').find('.av-parallax').remove(); } } a(); })(jQuery); </script> <?php }
This will just remove the parallax containers without applying background back. If it doesn’t work then there’s something wrong with the browser detection.
@Davide: I know that you referenced the demo site but we would like to see one of your page with the issue. Please post it here.
Best regards,
IsmaelFebruary 23, 2016 at 3:35 pm #587743Hi Ismael,
OK I have set up a test site for you – admin and FTP credentials below.
Clean WordPress / Enfold install with child theme. 1 page with parallax background color section and one with fixed.
The code above is in the child theme functions.php.
Can confirm this IS working on parallax background – background image being removed and not replaced as expected.
Hope this helps, M
February 24, 2016 at 5:10 am #588116Hi!
Thank you for the info. That’s a bit of a good news. We updated the code in the child theme’s functions.php file. If possible, test it on a page without the fixed background, only parallax. I hope it works.
Best regards,
IsmaelFebruary 24, 2016 at 11:35 am #588294Success on the parallax background – can hardly believe my eyes after so long on this! Congrats!
February 24, 2016 at 12:31 pm #588316HI Ismael,
sorry I just read now your reply from yesterday and tried your new fix: that works pretty well!
Thank you very, very much and thank you M1000000 for your great support :)Davide
February 25, 2016 at 5:51 am #588754Hi!
That’s great! About the “fixed” option, is it OK if you use the parallax background for those sections? The two attachment options almost have the same effect. If not, we’ll try to create a workaround for that as well. Thank you for your patience.
Cheers!
IsmaelFebruary 25, 2016 at 11:51 am #588944Without being an ongoing thorn in your side (and having put quite a bit of time into this myself) I would say that, as we’re so close, a solution for fixed backgrounds would be good too. Once a project is handed off to clients (and mine could have multiple editors involved) it’s going to be difficult to ensure that they never apply a fixed background and the first we’ll know of it is a visitor complaining that the site is broken on their Win Phone.
- This reply was modified 8 years, 10 months ago by M1000000.
February 26, 2016 at 7:39 am #589577Hey!
Fair enough. The easiest workaround I can think of is to set the background-attachment to scroll on windows mobile view. Please try this:
// windows phone fixed background fix add_action('wp_footer', 'ava_custom_script_bgfixed'); function ava_custom_script_bgfixed(){ ?> <script type="text/javascript"> (function($) { function b() { var ua = navigator.userAgent, ie = new RegExp("IEMobile"), isMobile = ie.test(ua); if(isMobile) { $('.avia-bg-style-fixed').css('background-attachment', ''); $('.avia-bg-style-fixed').css('background-attachment', 'scroll'); } } b(); })(jQuery); </script> <?php }
If you don’t mind removing the fixed background effect, this code ought to do the job.
Best regards,
IsmaelMarch 1, 2016 at 11:21 am #591458Hi Ismael – sorry for the delay. Will test this today.
March 1, 2016 at 3:01 pm #591570 -
AuthorPosts
- The topic ‘Issue with Enfold one-page restaurant demo on mobile’ is closed to new replies.