Search…

X3 Photo Gallery Support Forums

Search…
 
User avatar
svenflock
Experienced
Topic Author
Posts: 34
Joined: 14 Oct 2019, 14:44

iPad Pro renders font different and does not allow menu navigation

28 Oct 2019, 17:38

Hi,

my issue could be related to viewtopic.php?f=54&t=9862.

I have tested my site on different devices. It works fine on retina, non-retina displays and smart phones (like the iPhone), but on the iPad Pro (2018 3rd. generation) is makes trouble with rendering the font as well as menu navigation. It could be related to the fact that iOS 13 serves desktop versions of homepages. This is what the site looks like on the desktop:

Image

And the same URL on the iPad Pro (iOS 13):

Image

The font differs. Further, the menu cannot be used properly with the iPad. I have made a video of it: https://xn--dsseldorf-hochzeitsfotograf-i3c.de/iPad.mov

iPhone renders the site nicely:

Image

Can you help me with that?

As I see it at the iPhone's screenshot right now: is there a way to disable the black "cookie policy" button?

When do you plan to make the next release?

Thanks :-)
 
User avatar
mjau-mjau
X3 Wizard
Posts: 13993
Joined: 30 Sep 2006, 03:37

Re: iPad Pro renders font different and does not allow menu navigation

28 Oct 2019, 23:18

svenflock wrote:my issue could be related to viewtopic.php?f=54&t=9862.
Indeed.
svenflock wrote:the iPad Pro (2018 3rd. generation) is makes trouble with rendering the font
This issue is unrelated to the menu click functionality, as font loading does not depend on screen-size/mobile in any way whatsoever. I can only guess this could be related to one of the following: 1) You are using a plugin or firewall, which is somehow blocking Google fonts (loaded from domain gstatic.com). I recently had someone using "little snitch" app that was blocking Google fonts load. OR 2) It's somehow related to the ü character in düsseldorf in your domain name.

I will need to check this myself from an iPad PRO, and/or maybe you can try from another wifi/network location? Or another iPad Pro? This is not related to the menu issue, which definitely has a logical explanation.
svenflock wrote:as well as menu navigation.
You could be right. The topbar menu was mainly created for HOVER interaction, so applying "touch" may trigger unexpected behavior (because touch triggers BOTH click and hover). I will need to look into this! Thanks for reporting.
svenflock wrote:It could be related to the fact that iOS 13 serves desktop versions of homepages.
There is no specific "desktop version" or "mobile version". It's just the fact that the X3 mobile-friendly menu is served to devices with CSS-resolution less than 1024 px, which until recently, mostly covered all mobile devices. Now that the topbar (with dropdowns) might display for large touch-devices (like iPad Pro), I may have to fix some inconsistencies in dropdown behavior, which was initially created for "pointer" devices (mouse/trackpad) that handle "HOVER" as expected.
svenflock wrote:As I see it at the iPhone's screenshot right now: is there a way to disable the black "cookie policy" button?
This is part of the X3 cookie plugin, and there are no options to "disable for mobile devices". I understand why you would want this, but I don't see any reason why a cookie plugin should apply for desktop but not mobile. If you really need the cookie plugin, that means you are not following the law by not showing it on mobile devices. In my opinion, you should disable the cookie plugin altogether, because I don't think you are collecting private information about the user.

It would be possible to add a custom CSS rule to HIDE the "cookie policy" button on small screens.
svenflock wrote:When do you plan to make the next release?
I'm currently working on an app that will be the foundation to new X3 control panel 2.0. Once I get the test-app out (hopefully a few weeks), I will immediately look into next X3 release, which will include a fix for topbar menu on touch devices.

Thanks!
 
User avatar
svenflock
Experienced
Topic Author
Posts: 34
Joined: 14 Oct 2019, 14:44

Re: iPad Pro renders font different and does not allow menu navigation

29 Oct 2019, 17:11

This is part of the X3 cookie plugin, and there are no options to "disable for mobile devices". I understand why you would want this, but I don't see any reason why a cookie plugin should apply for desktop but not mobile. If you really need the cookie plugin, that means you are not following the law by not showing it on mobile devices. In my opinion, you should disable the cookie plugin altogether, because I don't think you are collecting private information about the user.
The behaviour is still different between desktop and mobile. Once I agree to the cookie policy on the desktop, the message area disappears. On mobile, it keeps visible with the black button. So I see no law issue here as it works on desktop. What do you think?
When I provide customer logins, the users are "remembered" as a second visit to the site doesn't trigger the user/password field. So, I have to use the button. Also, it's Germany and we have law firms specialised to annoy you :-). 
I will need to check this myself from an iPad PRO, and/or maybe you can try from another wifi/network location? Or another iPad Pro? This is not related to the menu issue, which definitely has a logical explanation.
I make the test on the weekend as I have now no access to the device. However, LittleSnitch is not used on the iPad but on my Mac where the font is delivered perfectly. I would be very happy if you could investigate that.
Looking forward to the new release. I am also happy to be beta/public tester for your new releases. I am very eager to the new backend (dark mode what I have head so far :-))
 
User avatar
mjau-mjau
X3 Wizard
Posts: 13993
Joined: 30 Sep 2006, 03:37

Re: iPad Pro renders font different and does not allow menu navigation

29 Oct 2019, 23:49

svenflock wrote:The behaviour is still different between desktop and mobile. Once I agree to the cookie policy on the desktop, the message area disappears. On mobile, it keeps visible with the black button. So I see no law issue here as it works on desktop. What do you think?
When I provide customer logins, the users are "remembered" as a second visit to the site doesn't trigger the user/password field. So, I have to use the button. Also, it's Germany and we have law firms specialised to annoy you :-). 
But can't user click to expand and agree with the cookie policy, and then it will never appear again? I can't test from here, because your plugin is using "location services", in which case it does not show for visitors where the EU cookie law does not apply. Furthermore, I tested from here on local X3 version (with location services disabled), and the dialog box shows as usual on mobile, and when I click agree, it does not show again (which is correct behavior).
Image
I'm not quite sure how you get that result from your screenshot, because I cannot recreate it from here. We are using a 3rd party cookieconsent plugin, which is actually creating the messages ... You sure you not testing in "private browser"? For me to test, you would need to disable "location services" in the plugin options, so that I can test the cooke plugin from here (outside EU).
svenflock wrote:I make the test on the weekend as I have now no access to the device. However, LittleSnitch is not used on the iPad but on my Mac where the font is delivered perfectly. I would be very happy if you could investigate that.
Looking forward to the new release. I am also happy to be beta/public tester for your new releases. I am very eager to the new backend (dark mode what I have head so far :-))
Sure thing. I will be looking into topbar menu interaction for next release. As for the fonts, I think it's something unrelated. I don't have an iPad pro, but I might be able to check from another location soon.
 
User avatar
svenflock
Experienced
Topic Author
Posts: 34
Joined: 14 Oct 2019, 14:44

Re: iPad Pro renders font different and does not allow menu navigation

30 Oct 2019, 03:15

But can't user click to expand and agree with the cookie policy, and then it will never appear again?
Not quite. I made a video. Please have a look at the following link. It shows that I the button does not vanish.
https://düsseldorf-hochzeitsfotograf.de/cookie.mov
 
User avatar
mjau-mjau
X3 Wizard
Posts: 13993
Joined: 30 Sep 2006, 03:37

Re: iPad Pro renders font different and does not allow menu navigation

30 Oct 2019, 04:09

I'm wondering why yours does not look or work the same as in my screenshot. This is an external plugin, and it's in any case not X3 that is creating that "tab" after you click "dismiss". I know for this plugin there are advanced settings {deny: ‘deny’, allow: ‘allow’, dismiss: ‘dismiss’}, which might prevent the plugin from actually removing itself, but those options are not available from the X3 plugin settings. I can only diagnose this in your case if you can disable "location services" for the plugin so I can test from here ... As mentioned, it's using this plugin:
https://cookieconsent.osano.com/
 
User avatar
svenflock
Experienced
Topic Author
Posts: 34
Joined: 14 Oct 2019, 14:44

Re: iPad Pro renders font different and does not allow menu navigation

13 Dec 2019, 11:58

Hi,

sorry that I was not available for so long. I had to move my content to a new server and domain. I just wrote you an mail with my new domain and my registration code.

So, now I have disabled the GEO location. Could you please have a look why the cookie consent does not disappear on mobile devices after clicking the close button?

Thanks!

Do you have any news on the new version with respect to the iPad Pro issues? Am happy to betatest :-).
 
User avatar
mjau-mjau
X3 Wizard
Posts: 13993
Joined: 30 Sep 2006, 03:37

Re: iPad Pro renders font different and does not allow menu navigation

13 Dec 2019, 22:12

svenflock wrote:So, now I have disabled the GEO location. Could you please have a look why the cookie consent does not disappear on mobile devices after clicking the close button?
Sorry, but I can't reproduce this issue. I tried from both desktop and iPhone, and it closed properly in both cases. See screenshot after closing the notifcation on iPhone:

svenflock wrote:I had to move my content to a new server and domain. I just wrote you an mail with my new domain and my registration code.
Fixed!
svenflock wrote:Do you have any news on the new version with respect to the iPad Pro issues? Am happy to betatest :-).
Sorry, I'm trying to complete another task before I start X3.28.0 shortly.
 
User avatar
svenflock
Experienced
Topic Author
Posts: 34
Joined: 14 Oct 2019, 14:44

Re: iPad Pro renders font different and does not allow menu navigation

16 Dec 2019, 04:54

Hi again,

I run that test with the cookie consent now at least 50-100 times :-). I recorded the behaviour. In the video linked here you find several scenarios:
  • Desktop (you will even notice that the black box has not completely disappeared) -> I have to press more than once to make the button disappear (sometimes 2-3 times)
  • Mobile (Android Pixel 2 XL) - it gets actually removed after pressing once
  • Mobile (iPhone XS) - same behavior as desktop, i.e. I have to press several times and the whole box stays in focus
  • Mobile (Android 2) - same as iPhone
If you repeat it, you will get a different behavior for all devices.

Why is that happening? Why do I have to press the button 2-3 times?

Could you have a look at it again?

Thanks!
 
User avatar
mjau-mjau
X3 Wizard
Posts: 13993
Joined: 30 Sep 2006, 03:37

Re: iPad Pro renders font different and does not allow menu navigation

16 Dec 2019, 05:46

I'm afraid this is something that only happens  for you for some reason. I don't know exactly why, but perhaps some plugin or firewall issue on your network. Scroll to bottom of post for my suggestion.
  1. First of all, this is a popuplar external plugin called cookieconsent with 2000+ developer users. Behavior is 100% handled by the javascript plugin, and it's not handled by X3 at all. I would have to assume if there was a bug, it would have been quickly fixed by the developers and/or reported by others.
  2. No other X3 user has ever reported this issue.
  3. I have tested in ALL browsers from here, and I can't see the problem:

    iPhone (after closed):
    Image

    Windows Internet Explorer (tested through browserling.com, feel free to test yourself):
    Image
    Image

    Chrome:
    Image
    Image

    Firefox:
    Image
    Image

    Safari:
    Image
    Image

    Opera:
    Image
    Image
I would suggest you do the following: Open Developer > Inspector (all browsers have this). Click the CONSOLE tab, and load your page while the console is open. Click to remove the cookie warning ... Do you see any warnings or errors?
 
User avatar
svenflock
Experienced
Topic Author
Posts: 34
Joined: 14 Oct 2019, 14:44

Re: iPad Pro renders font different and does not allow menu navigation

16 Dec 2019, 05:54

Sorry, the video was with the wrong name. Now it can be watched.

Thanks for testing on your site with all the different browsers :-). I will look into the DEV tools and give you feedback.
 
User avatar
mjau-mjau
X3 Wizard
Posts: 13993
Joined: 30 Sep 2006, 03:37

Re: iPad Pro renders font different and does not allow menu navigation

17 Dec 2019, 00:43

I watched your video, and as far as I can see, it closes properly, but you have to click 2-3 times? Furthermore, I don't see the point of your tests for multiple devices in the SAME desktop chrome browser. That plugin you are using is basically just resizing the screen, and it's still chrome desktop browser, using mouse, with the same plugins installed, re-creating the same bug across all instances. I thought perhaps from your previous post, that you had actually tested from multiple devices.

Please test this from other devices, and I think you will find it works everywhere except in your main desktop browser. Then I would disable all plugins and check from your desktop browser.

For the record, does your desktop screen support touch?
 
User avatar
mjau-mjau
X3 Wizard
Posts: 13993
Joined: 30 Sep 2006, 03:37

Re: iPad Pro renders font different and does not allow menu navigation

28 Mar 2020, 10:12

Topbar menu navigation on large iOS touchscreen devices (like iPad PRO) should be resolved in latest release X3.28.0. Can you check?

Keep in mind, dropdown menu's won't work perfectly on touch devices. Unlike mouse pointers, which have the ability to hover AND click, touch devices can only toggle a dropdown by simulating focus or hover on "tap".