Buttons/page numbers need double click to open in Safari on iPad

Home Forums Icelander Buttons/page numbers need double click to open in Safari on iPad

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #16800

    design_dolphin
    Participant

    Buttons/page numbers need double click to open in Safari on iPad

    Resolved

    Hey there! Have you noticed this support service is provided FREE of charge?
    If you like the speed and accuracy of resolutions, please consider supporting me with a small donation. Thank you

    Consider a donation →

    Hi,

    There seems to be an issue where on the iPad you have to click twice on a button/page number on the iPad. It works fine on Windows and Firefox for example.

    It could be related to this ‘:before’,’:after’ and ‘:hover’ state:
    Title: “The Annoying Mobile Double-Tap Link Issue”
    Link: https://css-tricks.com/annoying-mobile-double-tap-link-issue/

    Example pages:
    https://ecodelphinus.com/product-category/for-her/sweaters/ (more info button and page number)
    https://ecodelphinus.com/product/marc-jacobs-womens-merino-wool-fisherman-sweater/ (magnifying glass and visit store buttons)
    https://ecodelphinus.com/category/fashion/makeup/ (page numbers)

    For the page numbers the forward and previous buttons do work normally. It is the buttons with the numbers that are causing issues.

    It only affects Safari browsers if I understand correctly, but it is also something that only started, or I became aware off, recently.

    Can you help fix please?

    #16803

    Oliver Juhas
    Keymaster

    Hi design_dolphin,

    Wow, thank you very much for such thorough info and your investigation!

    This seems to be very unfortunate Apple mobile device behavior. I still think this is not an issue with theme design but rather how Apple treats the links on its mobile devices.

    I will consider “fixing” this in theme update. You can try using this custom CSS to fix the issue:

    @media only screen and (max-width: 1024px) {
    
    	/* Buttons */
    		.button:hover::after,
    		button:hover::after,
    		input[type="button"]:hover::after,
    		input[type="reset"]:hover::after,
    		input[type="submit"]:hover::after,
    		.main-navigation-container .button > a:hover::after,
    		.child-page .more-link:hover::after,
    	/* Pagination*/
    		.pagination a:hover::before,
    		.pagination .prev:hover::before,
    		.pagination .next:hover::before,
    	/* Posts lists */
    		.child-page:hover::before,
    		ul.products .product.sale:hover::before {
    			display: none;
    		}
    
    }

    Technically, using @media not screen and (pointer: fine) { instead of @media only screen and (max-width: 1024px) { should be better if it works…

    Best regards,

    Oliver Juhas
    WebMan Design

    #16814

    design_dolphin
    Participant

    Thank you :D

    Yes, browser issues can be difficult time consuming, luckily it is a lot better than it was. I had little to no idea on how or where to fix this, and I really appreciate you helping with the solution.

    The code worked, except for links in tables, so added that:

    
    @media only screen and (max-width: 1024px) {
    
    	/* Buttons */
    		tbody tr:hover td::after, tbody tr:hover th::after,.button:hover::after,
    		button:hover::after,
    		input[type="button"]:hover::after,
    		input[type="reset"]:hover::after,
    		input[type="submit"]:hover::after,
    		.main-navigation-container .button > a:hover::after,
    		.child-page .more-link:hover::after,
    	/* Pagination*/
    		.pagination a:hover::before,
    		.pagination .prev:hover::before,
    		.pagination .next:hover::before,
    	/* Posts lists */
    		.child-page:hover::before,
    		ul.products .product.sale:hover::before {
    			display: none;
    		}
    
    }

    There may be other areas where it is needed, but I haven’t come across them yet. If I do my intention is to update.

    Have a great weekend :D

    #16816

    Oliver Juhas
    Keymaster

    Hi design_dolphin,

    Well, this is really unfortunate behavior on iOS devices, as by adding table styles it means it propagates. If parent element contains “bad” hover styles, the links within that elements won’t work correctly either.

    From the top of my head I can tell you this will affect also child pages list (you can test this on https://themedemos.webmandesign.eu/icelander/ – the 3 boxes at the bottom of page content). If you are using them on your website, this needs to be added to the CSS. You can try adding .child-page:hover::before to the list of selectors, but in this particular case I’m not sure if that’s enough as the hover is also changing other things on that element, so, everything depends on how iOS treats those…

    I will do my best to solve this issue with theme version 1.2.0. Most likely I will go with removing hover states on “mobile” screen sizes altogether (probably for all screens less than 1280px) as there is no reliable way of detecting iOS device in CSS as far as I know. Alternatively I might go for some JavaScript solution, but I’d like to avoid loading additional JS if possible.

    Best regards,

    Oliver Juhas
    WebMan Design

    #19513

    Oliver Juhas
    Keymaster

    Hi,

    This will be fixed in theme version 1.3.0. Thank you for patience.

    Best regards,

    Oliver Juhas
    WebMan Design

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.