Front Page images zoomed – specific to Safari

  • Resolved silverferret4

    (@silverferret4)


    3 years, 9 months ago

    There is an issue with Twenty Seventeen’s Front Page images specific to Safari on iPad where the Featured Image of each of the pages included displayed as zoomed in to unrecognizable proportions. It only occurs on tablets running Safari (as near as I can tell).

    This issue is already captured here in the Twenty Seventeen forum, and a Trac ticket has been created here … although there seems to be no recent activity on either.

    What is the appropriate way to solve this?

    There is a CSS hack posted in the Theme forum, although I think it applies very broadly and imo should probably be narrowed to the problem browser (Safari)? Really didn’t want to edit the stylesheet of the Theme directly, so I created a child theme, but it struck me that if I go that route probably then lose all of the gains I just made with this AMAZING plugin (and thank you for all of your work on this! It really IS a lifesaver!!!). Maybe I am wrong about that?

    For reference, here is the suggested CSS hack. This is on line 3790 in my editor, and the suggested hack is to comment this out.

    /* With panel images 100% of the screen height, we're going to fix the background image where supported to create a parallax-like effect. */
.background-fixed .panel-image {
	background-attachment: fixed;
}

    Thanks to your plugin my site is working with Twenty Seventeen in all the ways I had hoped… except on iPad with Safari. And while I could probably live with this on deeper pages and posts, it is really unfortunate that it happens to show up on the Front Page where you are trying to make a first impression with people coming to your site.

    Thoughts? Really looking for anything you can suggest.

    • This topic was modified 3 years, 9 months ago by silverferret4.

    The page I need help with: [log in to see the link]

Viewing 10 replies - 1 through 10 (of 10 total)
  • Plugin Author Oliver Campion

    (@domainsupport)

    Hello,

    So, so sorry that we missed this somehow?!

    Did you resolve your issue or do you still require us to look into it for you?

    Apologies,

    Oliver

    Thread Starter silverferret4

    (@silverferret4)

    Hey no worries!

    No, I haven’t resolved it yet. I am totally open to suggestions if this isn’t something that appropriately fits into your product. And it sucks that it only occurs on Safari, on tablet… which seems really narrow? Except when you realize that is ALL iPads. Kind of a bummer.

    Thoughts?

    Plugin Author Oliver Campion

    (@domainsupport)

    Well, my immediate reaction is that this may well be caused by something similar to this thread … ?

    Thread Starter silverferret4

    (@silverferret4)

    Hey Oliver: Yeah, that feels right. In one of the responses you say…

    Sooooooo I’m afraid we are left with only one course of action which is to remove this option altogether and revert to the theme’s default action which is to only show the parallax for browsers over 768px wide.

    I’m using a child theme, and I should be able to leverage the order of CSS loads to just override (based on precedence) in that for this specific piece, correct? But what would I need to override?

    Plugin Author Oliver Campion

    (@domainsupport)

    Annoyingly I won’t have an iPad here to test this on until my kids come back from their mothers on Monday … but here’s what I think is going on …

    If your iPad is wider than 768px then it’s likely that background-attachment: fixed; is being ignored but the CSS to prevent the zooming issue isn’t kicking in because this only happens at less than 768px … so the fix would be to target iOS devices over 768px …

    @supports (-webkit-touch-callout: none) {
@media screen and (min-width: 48em) {
.panel-image {
height: auto;
}
}
}

    Let me know if that works?

    Oliver

    Thread Starter silverferret4

    (@silverferret4)

    Just tried and it isn’t working. I can play around with it a little more after I am done working.

    Note: I did make sure to bump the version of my stylesheet to make sure it is getting loaded even if cached, so I know it’s coming through.

    Plugin Author Oliver Campion

    (@domainsupport)

    I’ve borrowed an iPad and I think I’ve found the solution … I was on the right track but it needed a bit more …

    @supports (-webkit-touch-callout: none) {
	@media screen and (min-width: 48em) {
		.background-fixed .panel-image {
			background-size: cover;
			height: auto;
			background-attachment: scroll;
		}
	}
}

    This is definitely a bug with the actual theme so I’ll be raising a ticket with them to report it.

    Let me know if that works for you.

    Thanks,

    Oliver

    Thread Starter silverferret4

    (@silverferret4)

    Oliver, you nailed it!!!

    Validated that it works perfectly on iPad, and that behavior hasn’t changed on phone, desktop, etc.

    Thank you SO much!!!!

    Plugin Author Oliver Campion

    (@domainsupport)

    Cool. I’ve raised a ticket for it so hopefully it’ll be fixed in the next theme update ??

    Plugin Author Oliver Campion

    (@domainsupport)

    Just to update this thread, we’ve now added this fix into the latest update of the plugin so you won’t need the CSS anymore when running the Options for Twenty Seventeen plugin.

    As an aside, I found this thread earlier today which shows just how old this bug is!

    Kind regards,

    Oliver

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘Front Page images zoomed – specific to Safari’ is closed to new replies.