-
Posts
-
Hi,
I am noticing a very prominent “stutter” when scrolling down on a couple of my site pages. The page uses a color box with a background image, this then has a text box inside of the color box with a single line of text. When scrolling down the page on mobile devices, the image scrolls a bit then it appears to skip back to the top and scroll from the top again. Please see the urls listed below. I have tried on the following browsers:
Firefox Developer edition (my primary browser for development), Firefox, Firefox Private Window, Chrome, Safari, Brave, Opera, Vivaldi.
It only appears to happen on mobile devices. Any feedback would be helpful.Thank You!!
JP
Hey JP,
Could you try updating the theme to the latest version (5.0) to see if that helps please? https://kriesi.at/documentation/enfold/how-to-install-enfold-theme/#theme-update.
Best regards,
RikardHi Rikard,
When I went into Theme Options > Theme Updates It states that my current version, 4.9.2.1 is the latest version and that there are no updates available. My token is working but it isnt allowing me to see that version 5.0 is available. See the screenshot below.Any suggestions?
Thank You,JP
Hi,
Please try to install and configure this plugin: https://envato.com/market-plugin/
Best regards,
RikardRikard,
I updated the theme to 5.0 and it is still stuttering when I scroll down on those pages. The header images only seem to be stuttering. It is a color box with a background image.
Thanks
JPmy suggestion is ( i do as participant not see the private content) that the background-image is set to attachment fixed ! ;)
this is a known bug on safari and with iOs devices. Link
A trick to solve this problem is to bypass the attachment fixed property by passing the image to a pseudo-container ( you can take before aswell ) as a background image, but then fixing the pseudo-container. This works much better with an iPhone.https://kriesi.at/support/topic/theme-is-shaking-a-lot-in-safari/#post-1207474
so what to do :
- give to the color-section a custom-class: bg-fixed
- set the behavior to scroll
- put this to your quick css:
.avia-section.bg-fixed { -webkit-clip-path: inset(0 0 0 0); clip-path: inset(0 0 0 0); background-size: 0 !important; overflow: hidden; position: relative; top: 0; } .avia-section.bg-fixed::after { content: ""; position: fixed; width: 100%; height: 100%; top: 0; left: 0; background-image: inherit !important; background-repeat: no-repeat !important; background-size: cover; background-position: inherit; pointer-events: none; will-change: transform; z-index: -1; visibility: visible !important; }so the container itself is only to determine the background via the alb element. The background-size was then reduced to zero. The color-section itself got with the clip-path a kind of keyhole function. That is important – because the later fixed pseudo-container should not be seen on other places – only through that keyhole.
The pseudo-container has the same dimension as the parent container and inherits the background-image of the parent. But now we can fix the whole background container. And this is something that is supported by Safari and iOS Devices.PS : if you got a lot of those containers on one page – it might be better to remove the will-change option on performance reasons.
Thank You Guenni007,
It didnt seem to resolve the issue. The issue seems to be due to me using a transparent header. When I turn the transperency off, the stutter goes away. When I turn it back on the stutter returns. I def want the transparent header on. It appears to be stuttering on all mobile browsers but not on desktop browsers. If anyone has experienced this in the past, please, let me know what you did to resolve.Here is a short vid of what the stutter looks like on the mobile browsers: https://imgur.com/a/FMF14JS
this looks as if the padding-top is swiched when header-scrolled class is in the DOM.
May i see the example page – maybe you have set some css that is inconsistant.
PS: on top the white flash comes from the header_bg background-color.
___________________________________________________
PS if you like to look to the fix i provided above –
go and look to :
https://consulting.webers-testseite.de/leistungen2/
https://consulting.webers-testseite.de/leistungen2a/
with your iphonei guess that this is the troublemaker:
@media only screen and (max-width:1100px) { #top #wrap_all .av_header_transparency, .av_header_transparency #advanced_menu_toggle { background:transparent!important; position:absolute!important } }the class: av_header_transparency is a class that is removed when the header is scrolled.
The switch from absolute to relative is the reason for that “jump”what do you try to reach with it?
Hi,
Thank you for your patience and thanks to Guenni007 for spoting the issue, when the mobile header is scrolled, the class: av_header_transparency is removed and the switch from absolute to relative is the reason for the “jump”
please try this css in the Quick CSS to correct:@media only screen and (max-width:1100px) { #top #wrap_all .av_mobile_menu_tablet { background:transparent!important; position:absolute!important } }After applying the css, please clear your browser cache and check.
Best regards,
Mike
- You must be logged in to reply to this topic.