Tagged: , , ,

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • July 24, 2017 at 7:32 pm #829169
    psstudiosinc

    Hello,

    A client pointed out an odd spacing issue on Windows 10. Using Google Chrome on a 15″ laptop, the dynamic spacing doesn’t account for the full container spacing and leaves an empty space on the right.

    See the image | See the live page

    I can usually troubleshoot issues that arise on our own, but seeing as the size and position of each grid item are controlled via JS dynamically, I do not want to start forcing CSS to override. I am not seeing this issue on any other browser (even IE 11 works fine). Surprisingly, Chrome is the only culprit of the issue.

    Chrome on iOS/Mac works fine, by the way – Windows 10 is the only OS with the Chrome issue.

    Can you please advise? Thank you.

    • This topic was modified 7 years, 3 months ago by Ismael.
    July 27, 2017 at 9:19 am #830514
    John Torvik

    Hey psstudiosinc,

    Please, may you provide to us your website link and the WP and FTP credentials?

    Best regards,
    John Torvik

    July 27, 2017 at 11:46 pm #830847
    psstudiosinc
    This reply has been marked as private.
    August 1, 2017 at 5:03 am #832557
    Rikard

    Hi,

    Thanks for that and sorry for the late reply. The login details are not working, could you check and verify please? Also, I couldn’t reproduce the error on my end using Chrome on OSX. Is it only happening on Windows?

    Best regards,
    Rikard

    August 1, 2017 at 5:39 pm #832986
    psstudiosinc

    Hello Rikard,

    I’m not sure what happened there, but the same credentials are now working. Sorry about that. Please try again.

    Yes, it is only happening on Windows 10, Chrome browsers. iOS is fine for me too – which is why I never noticed. The client is on Windows 10 using Mac. I have not seen the issue on ANY other browsers in iOS or Windows. All but Chrome on Windows 10 look perfect.

    Thank you,
    James

    • This reply was modified 7 years, 4 months ago by psstudiosinc.
    August 7, 2017 at 6:53 am #835233
    Rikard

    Hi James,

    I’m really sorry about the late reply, I haven’t been able to check the issue on a Windows machine yet though I’ve asked my colleagues who are on Windows machines to have a look at it.

    Best regards,
    Rikard

    August 7, 2017 at 9:27 pm #835609
    psstudiosinc

    Ok, thank you. Let me know if I can provide any more details other than the problem of Chrome on Windows 10 only.

    James

    August 9, 2017 at 7:21 pm #836570
    Mike

    Hi,
    Sorry for the late reply, I have checked in Windows 10, Chrome Version 60.0.3112.90 with different screen resolutions, but I could not reproduce the error.
    I have also tried http://browsershots.org with 6 older Chrome versions with no errors.
    2017-08-09_130251
    I also tested in Edge and Firefox, even though you said they were fine, and I tried Disabling JavaScript, just in case.
    I do note you have a 404 on /wp-content/themes/edgebuildings/js/dist/autocompleteoff.js but don’t think that is the issue, unless it was working before and it was causing a conflict.
    I assume your client has cleared their cache and disabled any browser addons?
    I do question your statement that “The client is on Windows 10 using Mac.” are they using a virtual box on a Mac, or did I misunderstand that statement?
    Can you ask what Chrome version they are using? Sorry that I was not more help.

    Best regards,
    Mike

    August 9, 2017 at 8:08 pm #836594
    psstudiosinc

    Hi Mike,

    My apologies for the confusion. The statement “The client is on Windows 10 using Mac.” was incorrect. It looks like my punctuation was off and I didn’t proof read well enough. I meant “The client is on Windows 10. Using Mac, I have not seen the issue on ANY other browsers in iOS or Windows.” I used a Windows VM on my Mac and could not reproduce. It was only until we tested it on Chrome using our Lenovo ThinkPad E470 using Windows 10 (very similar to what our client is using) that we were able to replicate the issue ourselves. The resolution is set to 1920×1080, as are all other recommended display settings out-of-the-box.

    Additionally, once we drag the screen to a larger monitor using the same browser window size, the issue corrects itself and spans all 4 columns normally. I have no clue why this is happening.

    I realize this is a very particular anomaly that is difficult to replicate without the necessary hardware. Hopefully with the spec info and additional details, you will be able to see it occur. Thank you for attempting to resolve this weird issue.

    • This reply was modified 7 years, 4 months ago by psstudiosinc.
    August 15, 2017 at 9:18 am #839121
    Ismael

    Hi,

    Thank you for the update.

    Decrease the width of the columns slightly. 

    #top .no_margin.av_one_fourth {
    width: 24.8%;
}

    Best regards,
    Ismael

    August 22, 2017 at 8:32 pm #842753
    psstudiosinc

    Hi Ismael,

    Thank you for this, but the widths are dictated by the absolute positioning of the .av_one_fourth elements. JavaScript is calculating the left and top positioning and placing inline CSS, so even with your solution in place, the 4th column is still dropping due to the absolute positioning. Placing width: 24.8% !important; did not resolve either and is not realistic with media queries on smaller devices. I did not want to mess with the positioning as that negatively affects the sort feature.

    Since this is such a weird and uncommon issue, the client has accepted it and would not like to continue spending funds to address. Thanks for your help in trying to resolve!

    James

    August 24, 2017 at 12:53 pm #843453
    Ismael

    Hi,

    Thank you for this, but the widths are dictated by the absolute positioning of the .av_one_fourth elements

    The absolute positioning of the items is calculated based on their width, the width of the next item and the width of the parent container, not the other way around, so the width adjustment should make a difference. Did you try it?

    Best regards,
    Ismael

    August 24, 2017 at 8:35 pm #843677
    psstudiosinc

    Hi Ismael,

    Yes, I did try it. For some reason, my last test was only showing it working after sorting the categories. Now, I am seeing it fixed at 24.8%. Must’ve been a caching issue.

    Thank you for your help. All is working well now.
    James

    August 26, 2017 at 5:32 am #844282
    Ismael

    Hi,

    Alright. Glad it is working. Let us know if you need anything else.

    Best regards,
    Ismael

  • Author
    Posts
Viewing 14 posts - 1 through 14 (of 14 total)
  • The topic ‘Portfolio rendering issue on Windows 10, Chrome’ is closed to new replies.