Home Forums Showcase Writer’s site refresh

Viewing 16 posts - 1 through 16 (of 37 total)
  • Author
    Posts
  • #62293
    scrambler
    Moderator

    One of my relative writer’s website was in a badly need a a refresh, so here it is

    https://www.nicolatrwst.com/

    Nothing Fancy, but let me know if anything bugs you or if you see any issues 🙂

    Cheers

    Known issues:

    • The munchies featured images were originally small so eventually I would need to redo them in higher res…
    • The excerpt transition on hover for the munchies excerpt does not work on MS Edge because of a Bug on Edge that does not work when using Calc values (which are needed for proper positioning)

     

    #62306
    Gillian
    Moderator

    Looks great, scrambler 🙂

    #62333
    thesurge
    Participant

    @scrambler

    I am guessing that you used the parallax shortcode for the home page sections?

    It looks good on desktop but unfortunately doesn’t work so well on iPad. I have encountered this a few times, I can’t remember exactly without checking but its something to do with the way iOS Safari handles the ‘cover’ property which causes the background images to scale to the full height of the page, hence you see an enlarged, pixelated area of the image.

    This is specific to the shortcode, using the parallax posts method works as expected.

    In the past I have used CSS to swap the images and tidy up the iOS views, I think there is a post on this forum where I mentioned this.

    #62335
    scrambler
    Moderator

    Thank @thesurge

    I actually used Weaver slider posts and a show post shortcode for the parallax image, but that should be the same as using the parallax shortcode now .

    Parallax uses fixed background images that cover the entire browser area, and that is not supported on most mobile devices (why that has been for years now eludes me…)

    So on mobile devices, the background will usually be like a regular image.

    On the Ipad, are you seeing a regular image scrolling up, or are you seeing a parallax fixed image but with bad scaling?

    And I am surprised by your remark that Parallax post normally works but not the shortcode, as I think weaver fixed the few CSS differences there was between the two.

    May be you can take a screenshot of what you see on the Ipad.

    If anyone else can test on Apple devices (Mac OS and IOS) I would appreciate it as I have no access to these devices…

    MS Edge does have a simulation mode and it seems to work in there, but I cant really trust that.

     

    #62698
    thesurge
    Participant

    @scrambler

    On iPad I see the background images with bad scaling, screenshots below.

    Interestingly a website I built a while ago (http://pinkertonclassiccycles.co.uk) using a similar method as you – parallax posts via a weaver show posts filter, used to work well on iPad, after just checking it now I find it no longer works as it used to, is this due to the CSS changes?

    So the problem is that in iOS Safari, Weaver parallax posts or parallax shortcode display with an enlarged, badly scaled background image.

     

    #62699
    thesurge
    Participant
    #62700
    scrambler
    Moderator

    @weaver, have you had a chance to check the Parallax images on Ipad recently to see what is going on?

    @thesurge besides the enlargement, does the parallax effect (fixed background) works on Ipad?

     

    #62701
    thesurge
    Participant

    @scrambler

    On iPad there is no parallax effect, the image scrolls with the page, like a regular background image – just with bad scaling.

    #62702
    scrambler
    Moderator

    @thesurge I added the rule below to change the background from fixed to scroll on ios as normally it is the fixed that causes issue there.

    .is-ios .parallax {background-attachment:scroll !important;}

    Let me know if that fixes the scaling issue.

    Thanks

    Hugues

    #62703
    thesurge
    Participant

    @scrambler

    That doesn’t seem to do anything.

    background-attachment:scroll is already the current behaviour on iPad.

    I think background-size: cover could be the issue.

    I don’t have time to test it out at the moment but the below CSS has worked in the past.

    /*iPad Pro */

    @media only screen and (min-device-width: 1024px) and (max-device-width: 1366px) {

    .parallax-base {

    background-position: 50% 62%;

    -webkit-background-size: 100%;

    -moz-background-size: 100%;

    background-size: 100%;

    }

    }

    /*iPad*/

    @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {

    .parallax-base {

    background-position: 52% 70%;

    -webkit-background-size: auto;

    -moz-background-size: auto;

    background-size: auto;

    }

    }

    @media (max-width: 767px) {

    .parallax-base {

    background-position: 52% 42%;

    -webkit-background-size: auto;

    -moz-background-size: auto;

    background-size: auto;

    }

    }

    #62706
    scrambler
    Moderator

    Using any of the unit will create a dependency on the image ratio and screen ratio.

    A solution that would ensure full coverage no matter what would be using vmax in the same proportion as the image ratio
    for example for images with a 16:9 ratio (ie: 1920px wide by 1080px high) the rule would be
    .is-ios .parallax {background size: 178vmax 100vmax !important;}

    For a square image you would use 100vmax 100vmax

    Using 100% or auto could result in blank space depending on the screen ratio versus image ration vs image position.
    That can be minimized by differentiating rules (kind of what you did) or images (like explain in the article below) for portrait devices and landscape device
    https://guide.weavertheme.com/optimizing-parallax-images-for-portrait-and-landscape/

    Now if using a landscape image (like I do with 1080p) using auto 100% is another possible compromise.
    You would only risk to see some white space on the side if the ratio of the screen is larger than the one of the image
    like 3:1 for 2:1 images, but that will not be the case on the ipad.

    So I made two test pages:

    One using Vmax to test if it works on ipad
    https://www.nicolatrwst.com/test/

    One with auto 100%
    https://www.nicolatrwst.com/test-parallax-on-ios-using-auto-100/

    Right now the rules are set to apply to all, based on the result, I will test to apply them only on ios with the is-ios class

    @thesurge Thank you if you can have a look and let me know what you see on ipad with these 🙂

    #62720
    thesurge
    Participant

    @scrambler

    Firstly, I tested on iPhone, both tests work quite well, of the two the auto 100% method has slightly better image placement, but the Vmax method could probably be tweaked for improvement too.

    On iPad neither work correctly without some adjustment.

    Vmax method:

    Images are not visible as they are positioned outside of the containing div.

    Changing to background-attachment: scroll; resolves that, also adjusting background-position: 50% 50%; to other values can be used to fine tune the position.

    Auto 100% Method:

    Images are still badly scaled. Again changing to background-attachment: scroll; resolves that.

    Removing 100% from background size, so it becomes  background-size: auto !important; is also required to scale correctly, then background-position can also be used as above to fine tune position.

    It seems that the only way it will work is if the parallax image is treated as a standard background image on iPad.

    background-attachment: fixed – does not work

    background-size: cover, background-size: 100%, background-size: auto – all seem to be workable as long as background-attachment: scroll is used.

     

    #62728
    scrambler
    Moderator

    Thank you for the report @thesurge

    Two things

    1- You say that Vmax and auto 100% only work on the Ipad if you change the background-attachment to Scroll, but I have a rule

    .is-ios .parallax {background-attachment:scroll !important;}

    That is supposed to do that on Ios, so on iPad what you should be seeing is attachment scroll and the size (vmax or auto 100%).

    From what you are saying, it seems .is-ios is not working for ipad.

    Given there is also a class .is-ipad, I have changed the rule to

    .is-ios .parallax, .is-ipad .parallax {background-attachment:scroll !important;}

    To see if that makes a difference.

    2- Do you actually have a way to see if the is-ios / is-ipad rule is active? Do you have a way to see if the classes appear on the body tag?

    I appreciate you help on this

    #62730
    thesurge
    Participant

    Just posted 2 replies but they seem to have vanished

    #62731
    scrambler
    Moderator

    @thesurge

    We cross posted so you need to check my revised post above your last one.

    But from your last post, it definitely looks like the .is-ios rule is not working.

    If you can check my revised post above and check if adding a rule with the is-ipad class worked.

    Also if you can actually inspect the body tag on ipad, it would be interesting to check if the classes (is-ios and is-ipad) are on the body tag.

    Right now with the rule I have, if either is-ios or is-ipad work, the Home page should be displaying with attachment scroll and size cover, which should in fact work based on your test. Let me know if it does.

    Apreciate the help as usual

    #62734
    scrambler
    Moderator

    I also posted one and it vanished too….

    My last post was telling you to check my last posts as I had changed it wile you posted yours.

    I get the feeling the is-ios class is not working on ipad, so I added is-ipad, may be you can check if these classes appear on the body tag on ipad, and if they do, let me know if the home page now works as it is set to use scroll (set with is-ipad) and cover

Viewing 16 posts - 1 through 16 (of 37 total)
  • You must be logged in to reply to this topic.