Before you ask please READ THIS

Works post grid titles don't display on mobile devices if using the default Agency child theme

in Agency Posts: 4
I'm creating a child theme for Agency, using the child theme files provided with the theme, and found that works post grid titles don't display on mobile devices when using the child theme. This is the case even when using the provided child theme files without any modifications. Below are the details, any help is appreciated.

Item with the issue:
In the Agency theme, a post grid of works that uses the Fatmoon Work grid template and has theme settings for Works List set to "title over photo", show texts when hovering = enabled and show texts when not hovering = disable.

Observation of correct behavior:
On a mobile device, touching a work as you scroll, will cause the title of that work to appear.

Description of issue:
If using the default child theme provided with Agency, the titles do not appear on mobile devices when touched to scroll.

Steps to reproduce the issue:
1) Start with the default Agency theme and all it's default content.
2) View the home page on a phone. Note that touching a work will make its title display.
3) Switch to using the child theme that came with Agency. Make no modifications or additions to the child theme.
4) View the home page on a phone again. Note that the titles no longer display when a work is touched.

Comments

  • AirAir
    Posts: 10,970
    Hello there:-)

    This is great bug report, I have never seen such!
    However there don't seem to be any connection for this issue and child theme unfortunately.

    1. What you mean by mobile? Android, iOS, or something else. Enabling default hover states of HTML elements on various systems work very differently, so it is important info.

    2. What browser?

    3. If you have live installation where this issue appears please post link to it, so . It works fine for me both on android and iOS systems, however Android respond to hover states in different way then iOS.

    With kind regards.
  • Posts: 4
    Thanks for your quick response :) Sorry, I should have included this information before.

    So far we have tested on these systems (phones only, we've not tested with tablets), and has the issue in all cases-
    iOS using Safari and Chrome
    Android using Chrome

    The working model can be seen here:
    http://agency.apollo13.kinsta.com/

    Here's where you can test the issue. This site is running the Agency theme with the default child theme:
    http://agency.cre8tivegroup.com/

    In our tests with the child theme, we can occasionally get one title to appear on the works grid if we fidget around with touching the screen different ways, but when using the parent theme only, the titles display easily every time.

    Also as reference, here's the site we're building. It's using the child theme and has the same issue:
    http://new.positiveimagevideo.com/

    Thanks!
  • AirAir
    Posts: 10,970
    Hi again :-)

    Thanks for all help and details. I have spend on this case some time today, and this is what I have experienced.

    I have activated child theme on our demo http://agency.apollo13.kinsta.com/ and tested it on Android and iOS, Chrome browser in both cases.

    On Android it worked fine for me every time. However on iOS I have noticed same difference as you reported.

    Earlier I though it could be some not loaded resources, but it doesn't look like it.
    Child theme only adds one , empty stylesheet, without changing anything else on front-end, what browser could notice. It doesn't even reorder anything.

    I still don't know what could be causing it, I am pretty clueless.
    I though that maybe this bonus style sheet overloads mobile browser, but then it shouldn't be so consistent issue on each device(my opinion).

    Later I will try enabling child theme, without adding child theme stylesheet to front-end. Maybe WordPress comment section from this file is causing this issue?

    With kind regards.
  • Posts: 4
    Thanks for looking into this. I hope you can discover what is causing this behavior.
  • AirAir
    Posts: 10,970
    I have retested this back again.

    I have tried:
    1. normal theme
    2. normal child theme
    3. child theme without adding child style sheet

    I have tested many times and can't confirm what I have seen yesterday - I have very inconsistent results . I think it was something different yesterday(like trying to do it while page was still loading).

    I have tested also on fresh site with child theme, and I have faced no issues at all.

    I suspected it can be connected to some errors that can be visible in console or just overload of page.

    Due to such tricky nature of this issue I can not solve it or explain it right now with 100% accuracy.

    One thing is certain - there is no JavaScript event attached to these grid elements, so it relies only on default device behavior on emulating hover interaction. And as it seems, it is emulated only when devices feel like it is "worth doing it".
    I think it would be good idea to add event that will fire "hover state" without blocking possibility to open item with single tap. However this is tricky and I am not sure how to do it yet.

    Anyway, if you are really concerned about touch devices, maybe good idea would be to switch to different way of displaying works:
    Customizing ▸ Works settings ▸ Works list ▸Work look ▸Title under photo

    With kind regards.
  • edited May 2017 Posts: 4
    I understand, that makes sense. We'll use an alternative design for the Works grid. Thanks!
    Enjoy your latte and doughnut from us, you've certainly earned it. :)
    Post edited by DaveM on
  • AirAir
    Posts: 10,970
    Wow,I didn't expect it after I failed to solve this issue finally. Thanks for your kindness!

    With kind regards.
Sign In or Register to comment.

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

In this Discussion